的解决！

Question

我正在构建一个简单的php页面，该页面使用HTML5视频和＆amp ;;播放视频播放列表。 jQuery绑定函数到fadeIn＆amp;当前视频结束后播放下一个视频。

将函数绑定到结束事件非常有效，但我想解雇fadeIn＆amp; amp;播放功能（比方说）在视频结束前20秒。

但我似乎无法弄清楚如何让这种魔力发生。这甚至可能吗？

我的HTML：

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

我的jQuery：

$('video').bind("ended", function(){
   $(this).fadeOut(20000).next().fadeIn(20000).get(0).play(); 
});

的解决！

$('video').on('timeupdate', function(event) {
  var current = Math.round(event.target.currentTime * 1000);
  var total = Math.round(event.target.duration * 1000);

  if ( ( total - current ) < 20000 ) {
    $(this).fadeOut(2000).next().fadeIn(2000).get(0).play();
  } 
});

非常感谢帮助人员，我能够使用您的精彩评论拼凑出答案，而其他看似无关紧要 SO帖子：

Uncaught TypeError: Object [object Object] has no method 'addEventlistner'

如果有人有一个更清洁的方式把它放在一起这太棒了，但这似乎对我的目的来说非常好。

Answer 1

我给出的第一个答案有一些问题。我已将其修改为正确

var myVid = document.getElementById("video1");

myVid.addEventListener('timeupdate', function() {
    if( (myVid.duration - myVid.currentTime ) < 20000 ) {
        console.log("less than 20 seconds left"); 
    }
});

这要求您为视频标记提供id，并且console.log应该替换为您要在函数内执行的任何操作。但是我已经测试了它并且运行良好。

在你的情况下，你需要运行一个循环并将事件绑定到每个视频，但要确保你引用实际的视频，而不是其中一个属性，如长度或项目。

如果您将此代码复制并粘贴到此示例的“尝试自己”部分的<script>标记中，则该代码将有效。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_progress

这是视频对象属性和事件的参考

http://www.w3schools.com/tags/ref_av_dom.asp

Answer 2

您可以使用以下任何一种：

$('video').currentTime;
$('video').duration;

我不打算编写代码，但你应该检查一下

if ( ( this.duration - this.currentTime ) < 20000 )

查看http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

jQuery bind：媒体结束前运行函数

的解决！

2 个答案: