We make YouTube online cinema
Hello.
Have you ever had a task at some time to run a video on the site, from the same YouTube, for example? But did it have to be done in such a way that the user, who was late for the beginning, looked from the moment that all users are watching (who started watching from the very beginning)?
I will say right away that there was no such task in front of me, but something shot in the head and I decided to try to do such a thing.
With this principle, you can make a “real” online cinema, where the late viewers have no choice but to continue to watch the movie from the current moment (in a real cinema, they are not asked to rewind the tape back, right?).
')
Everything looks simple - the time of the session comes, we turn off the light in the hall, we launch the film. The film ends, we turn on the light and turn off the projector. As it turned out, this is also quite easy to implement
To improve the cinema effect, I took the corresponding picture on deviantart. Thanks to the author, in the PSD there was a layer with lit and extinguished light:
As you may have guessed, the video itself will be located on the screen.
Throughout the session, once a second, a function will be called that will check the current date. If less than 10 seconds are left before the show starts, turn off the lights in the hall (remove one backdrop from fadeOut ()) and launch the video (using the YouTube API). When there is less than 10 seconds left until the end of the film, we will gradually start turning on the light - we will return the darkened back into place using fadeIn ().
For the late viewer, we will switch the video exactly for as many seconds as it was late. And in order that the user would not cheat and move the slider to the beginning, turn off the controls, as well as monitor the state of the video - before the start of the session we will prohibit the start of playback, and during the show - prohibit pressing the pause.
The only thing missing is to check whether the session is over, in order not to create a video and not to turn off / on the light just like that.
The JavaScript code is not tricky at all and I think it makes no sense to parse it here. If anything, write in the comments, we will understand.
See what it looks like here . Specify the start date of the session and the video ID from YouTube (namely the ID, not the URL). The time is indicated in your time zone.
PS: I am not able to impose anything at all, so I had to position all elements through position: absolute, for which I apologize.
Enjoy watching!
Download the archive for free and without SMS.
Have you ever had a task at some time to run a video on the site, from the same YouTube, for example? But did it have to be done in such a way that the user, who was late for the beginning, looked from the moment that all users are watching (who started watching from the very beginning)?
I will say right away that there was no such task in front of me, but something shot in the head and I decided to try to do such a thing.
With this principle, you can make a “real” online cinema, where the late viewers have no choice but to continue to watch the movie from the current moment (in a real cinema, they are not asked to rewind the tape back, right?).
')
Everything looks simple - the time of the session comes, we turn off the light in the hall, we launch the film. The film ends, we turn on the light and turn off the projector. As it turned out, this is also quite easy to implement
To improve the cinema effect, I took the corresponding picture on deviantart. Thanks to the author, in the PSD there was a layer with lit and extinguished light:
As you may have guessed, the video itself will be located on the screen.
Throughout the session, once a second, a function will be called that will check the current date. If less than 10 seconds are left before the show starts, turn off the lights in the hall (remove one backdrop from fadeOut ()) and launch the video (using the YouTube API). When there is less than 10 seconds left until the end of the film, we will gradually start turning on the light - we will return the darkened back into place using fadeIn ().
For the late viewer, we will switch the video exactly for as many seconds as it was late. And in order that the user would not cheat and move the slider to the beginning, turn off the controls, as well as monitor the state of the video - before the start of the session we will prohibit the start of playback, and during the show - prohibit pressing the pause.
The only thing missing is to check whether the session is over, in order not to create a video and not to turn off / on the light just like that.
The JavaScript code is not tricky at all and I think it makes no sense to parse it here. If anything, write in the comments, we will understand.
See what it looks like here . Specify the start date of the session and the video ID from YouTube (namely the ID, not the URL). The time is indicated in your time zone.
PS: I am not able to impose anything at all, so I had to position all elements through position: absolute, for which I apologize.
Enjoy watching!
Download the archive for free and without SMS.
Source: https://habr.com/ru/post/156017/
All Articles