如何在用户开始视频然后自动播放后开始暂停 html5 视频？答案

【问题标题】：How do I Start html5 video paused then after user begins video then autoplay?如何在用户开始视频然后自动播放后开始暂停 html5 视频？
【发布时间】：2013-03-21 13:44:43
【问题描述】：

我创建了一个 html5 视频播放列表。当页面首次加载时，我希望视频暂停，因此用户可以选择开始自动播放序列。

代码：

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var videoPlayer= document.getElementById('video');

videoPlayer.addEventListener('ended', function(){
this.pause();
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
}, false);

}//]]>  

</script> 


</head> 
<body> 
  <video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay autobuffer controls /> 

</body> 


</html>

Jsfiddle:http://jsfiddle.net/3uRq6/7/

【问题讨论】：

使用 flowpayer 来完成这个任务

标签： javascript jquery html html5-video video-player

【解决方案1】：

从表面上看，您需要颠倒您的逻辑。从<video> 中删除autoplay 属性，然后在您的事件监听器上更改src 然后播放视频。

http://jsfiddle.net/3uRq6/9/

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var videoPlayer= document.getElementById('video');

videoPlayer.addEventListener('ended', function(){
    this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
    this.play();
}, false);

}//]]>  

</script> 


</head> 
<body> 
  <video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autobuffer controls /> 

</body> 


</html>

【讨论】：