如何在html5視頻播放器中添加自動播放屬性

我想在單擊特定目標按鈕時將屬性autoplay添加到<video></video>元素。如何在html5視頻播放器中添加自動播放屬性

HTML

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

我試圖用jQuery：

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

...但視頻不能播放。我究竟做錯了什麼？

來源

2016-07-05 Daniel

我更新了你的問題補充說，你想到的是單擊按鈕時的視頻開始播放，否則就不是一個真正的問題：你的代碼成功添加屬性。 – trincot

設置自動播放標誌不足以使視頻播放，您應該在將自動播放設置爲true後立即調用load（）方法，以便視頻將重新加載然後播放，因爲該標誌爲真。

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

但是，爲什麼當你真的可以用JS播放視頻呢？以下是如何用jQuery做到這一點：

$('video').play();

來源

2016-07-05 02:50:20

使用視頻控制：自動播放

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

also you can include - 播放，暫停，交友對象，卷，全屏切換，標題/字幕（如果有的話），曲目（如有）

來源

2016-07-07 06:34:58

試試這個

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>

來源

2016-07-07 06:47:06

如何在html5視頻播放器中添加自動播放屬性

回答

相關問題