6

我正在构建一个简单的 php 页面，该页面使用 HTML5 视频和 jQuery 绑定函数来播放视频播放列表，以便在当前视频结束后淡入和播放下一个视频。

将函数绑定到结束的事件效果很好，但我想在视频结束前 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 帖子拼凑出一个答案：

未捕获的类型错误：对象 [object Object] 没有方法“addEventlistner”

如果有人有一种更简洁的方式将它们组合在一起，那就太棒了，但这对于我的目的来说似乎工作得很好。

4

2 回答 2

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

于 2013-02-01T19:28:03.370 回答
0

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

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

我不会写代码，但你应该检查一下

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

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

于 2013-02-01T19:14:10.487 回答