我正在尝试为窗口滚动事件上的html5视频设置currentTime。基本上,想法是在滚动页面时在视频时间轴中向前或向后移动。
此示例在此方面做得很好,没有任何问题:http : //codepen.io/ollieRogers/pen/lfeLc
这是代码:
// 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;
};Run Code Online (Sandbox Code Playgroud)
#set-height
display block
height 13500px
#v0
position fixed
top 0
left 0
width 100%
p font-family helvetica
font-size 24pxRun Code Online (Sandbox Code Playgroud)
<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="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> …Run Code Online (Sandbox Code Playgroud)