小编Phi*_*lov的帖子

为HTML5视频窗口设置currentTime.onscroll滞后

我正在尝试为窗口滚动事件上的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 24px
Run 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=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
  <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source> …
Run Code Online (Sandbox Code Playgroud)

javascript css video jquery html5

6
推荐指数
2
解决办法
847
查看次数

标签 统计

css ×1

html5 ×1

javascript ×1

jquery ×1

video ×1