October 24, 2012 at 23:24We make YouTube an online movie theater
Hello.
Have you ever had a task at a certain time to launch a video on the site, from the same YouTube, for example? But was it necessary to make it so that a user who is late for the start, looks from the moment that all users are watching (who started viewing from the very beginning)?
I must say right away that there was no such task in front of me, but something struck my head and I decided to try to do such a thing.
With this principle, you can make a “real” online movie theater, where late viewers have no choice but to continue watching the movie from the current moment (in a real movie theater they are not asked to rewind the film, right?).
Everything looks simple - the time comes for the session, we turn off the light in the hall, we start the film. The film ends, turn on the light and turn off the projector. As it turned out, implementing this is also quite easy.
To improve the effect of the cinema, I took a corresponding picture on deviantart. Thanks to the author, in the PSD there was a layer with the light lit and off:
As you may have guessed, the video itself will be located on the screen.
Throughout the session, a function will be called once a second that will check the current date. If less than 10 seconds remain before the start of the show, turn off the light in the hall (remove one backdrop in fadeOut ()) and start the video (using the YouTube API). When less than 10 seconds are left until the end of the film, we will gradually start turning on the light - we will return the darkened backdrop to its place using fadeIn ().
For a late viewer, we’ll switch the video for exactly as many seconds as it’s late. And in order for the user not to cheat and move the slider to the beginning, turn off the controls, as well as monitor the status of the video - before the start of the session, we will prohibit the start of playback, and during the show, prohibit clicking on pause.
The only thing that is missing is to check whether the session has ended, so as not to create a video and not turn off / turn on the light just like that.
The JavaScript code is completely tricky and there’s no point in disassembling it here. If anything, write in the comments, we will understand.
You can see how it looks here . Indicate the start date of the session and the video ID from YouTube (namely, ID, not URL). The time is indicated in your time zone.
PS: I’m not at all able to typeset, so I had to position all elements through position: absolute, for which I apologize.
Happy viewing!
Download the archive for free and without SMS.
Have you ever had a task at a certain time to launch a video on the site, from the same YouTube, for example? But was it necessary to make it so that a user who is late for the start, looks from the moment that all users are watching (who started viewing from the very beginning)?
I must say right away that there was no such task in front of me, but something struck my head and I decided to try to do such a thing.
With this principle, you can make a “real” online movie theater, where late viewers have no choice but to continue watching the movie from the current moment (in a real movie theater they are not asked to rewind the film, right?).
Everything looks simple - the time comes for the session, we turn off the light in the hall, we start the film. The film ends, turn on the light and turn off the projector. As it turned out, implementing this is also quite easy.
To improve the effect of the cinema, I took a corresponding picture on deviantart. Thanks to the author, in the PSD there was a layer with the light lit and off:
As you may have guessed, the video itself will be located on the screen.
Throughout the session, a function will be called once a second that will check the current date. If less than 10 seconds remain before the start of the show, turn off the light in the hall (remove one backdrop in fadeOut ()) and start the video (using the YouTube API). When less than 10 seconds are left until the end of the film, we will gradually start turning on the light - we will return the darkened backdrop to its place using fadeIn ().
For a late viewer, we’ll switch the video for exactly as many seconds as it’s late. And in order for the user not to cheat and move the slider to the beginning, turn off the controls, as well as monitor the status of the video - before the start of the session, we will prohibit the start of playback, and during the show, prohibit clicking on pause.
The only thing that is missing is to check whether the session has ended, so as not to create a video and not turn off / turn on the light just like that.
The JavaScript code is completely tricky and there’s no point in disassembling it here. If anything, write in the comments, we will understand.
You can see how it looks here . Indicate the start date of the session and the video ID from YouTube (namely, ID, not URL). The time is indicated in your time zone.
PS: I’m not at all able to typeset, so I had to position all elements through position: absolute, for which I apologize.
Happy viewing!
Download the archive for free and without SMS.