設置HTML5視頻window.onscroll當前時間滯後

我想在窗口滾動事件設置HTML5視頻currentTime。基本上這個想法是在你滾動頁面時在視頻時間軸上向前或向後移動。設置HTML5視頻window.onscroll當前時間滯後

這裏這個例子很好地做這件事不會有問題： 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; 
 
};

#set-height 
 
    display block 
 
    height 13500px 
 
#v0 
 
    position fixed 
 
    top 0 
 
    left 0 
 
    width 100% 
 

 
p font-family helvetica 
 
    font-size 24px

<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> 
 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source> 
 
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p> 
 
</video>

但是，當我嘗試用我自己的視頻中，視頻滯後： http://codepen.io/futurecrazy/pen/ZWGYBj

這裏是我的代碼：

// 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; 
 
};

#set-height 
 
    display block 
 
    height 13500px 
 
#v0 
 
    position fixed 
 
    top 0 
 
    left 0 
 
    width 100% 
 

 
p font-family helvetica 
 
    font-size 24px

<div id="set-height"></div> 
 
<p id="time"></p> 
 
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload"> 
 
    <source type="video/webm" src="http://philippsokolov.com/fm-4.webm"></source> 
 
    <source type="video/ogg" src="http://philippsokolov.com/fm-4.ogv"></source> 
 
    <source type="video/mp4" src="http://philippsokolov.com/fm-4.m4v"></source> 
 
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p> 
 
</video>

我已經嘗試了不同的視頻壓縮但仍然無法修復該問題。

希望有任何幫助。

來源

2016-03-02 Philipp Sokolov

我忘了補充，它似乎在Safari做工精細，並且該問題只發生在其他瀏覽器（Chrome瀏覽器，火狐） –