Forked from Ollie's Pen Scrolling controls for HTML5 video.
A Pen by Hitesh Kumar Sahu on CodePen.
Last active
August 29, 2015 14:25
-
-
Save hiteshsahu/4d293b8ad9154ec20bbc to your computer and use it in GitHub Desktop.
Scrolling controls for HTML5 video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #set-height | |
| p#time | |
| video(id="v0", tabindex="0", autobuffer preload) | |
| <source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source> | |
| <source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source> | |
| <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source> | |
| p Sorry, your browser does not support the <video> element. | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // select video element | |
| var vid = document.getElementById('v0'); | |
| //var vid = $('#v0')[0]; // jquery option | |
| // pause video on load | |
| vid.pause(); | |
| // alternative & optimized implementation thanks to http://codepen.io/daveroma/ | |
| window.onscroll = function(){ | |
| vid.currentTime = window.pageYOffset/400; | |
| }; | |
| /* | |
| Original (old) solution | |
| ======================= | |
| // pause video on document scroll (stops autoplay once scroll started) | |
| window.onscroll = function(){ | |
| vid.pause(); | |
| vid.currentTime = window.pageYOffset/400; | |
| }; | |
| // refresh video frames on interval for smoother playback | |
| setInterval(function(){ | |
| vid.currentTime = window.pageYOffset/400; | |
| }, 40); | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #set-height | |
| display block | |
| height 13500px | |
| #v0 | |
| position fixed | |
| top 0 | |
| left 0 | |
| width 100% | |
| p font-family helvetica | |
| font-size 24px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment