如何在html5视频播放器中添加自动播放属性

问题描述：

我想在单击特定目标按钮时将属性autoplay添加到<video></video>元素。如何在html5视频播放器中添加自动播放属性

HTML

<video controls> 
    <source src="video.mp4" type="video/mp4"> 
</video>

我试图用jQuery：

$('.targetButton').on('click', function(){ 
    $('video').attr("autoplay"," "); 
});

...但视频不能播放。我究竟做错了什么？

我更新了你的问题补充说，你想到的是单击按钮时的视频开始播放，否则就不是一个真正的问题：你的代码成功添加属性。 – trincot

答

设置自动播放标志不足以使视频播放，您应该在将自动播放设置为true后立即调用load（）方法，以便视频将重新加载然后播放，因为该标志为真。

$('video').autoplay = true; 
$('video').load();

但是，为什么当你真的可以用JS播放视频呢？以下是如何用jQuery做到这一点：

$('video').play();

答

使用视频控制：自动播放

<video controls autoplay> 
    <source src="video.mp4" type="video/mp4"> 
</video>

also you can include - 播放，暂停，交友对象，卷，全屏切换，标题/字幕（如果有的话），曲目（如有）

答

试试这个

var video = document.querySelector("#video"), 
 
    button = document.querySelector("button"); 
 

 

 
button.addEventListener("click", function() { 
 
    video.play() 
 
    //video.setAttribute("autoplay","autoplay")// this will set the attribute but will not play 
 
}, false);

<p> 
 
    <button>playVideo</button> 
 
</p> 
 

 

 

 

 
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="https://media.w3.org/2010/05/sintel/poster.png"> 
 

 
    <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
 
    <source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
 
     <source id="ogv" src="https://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
 

 
     <p>Your user agent does not support the HTML5 Video element.</p> 
 
</video>

如何在html5视频播放器中添加自动播放属性

相关推荐