html5ビデオプレーヤーでautoplay属性を追加する方法

Question

特定のターゲットボタンをクリックすると、autoplayを<video></video>要素に追加したいと考えています。

HTML

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

私はjQueryを使ってみました：

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

...しかし、ビデオが再生されません。私は間違って何をしていますか？

Answer 1

autoplayフラグを設定するだけでは動画を再生できない場合は、autoplayをtrueに設定した直後にload（）メソッドを呼び出して、フラグがtrueであるため動画が再読み込みされて再生されるようにする必要があります。

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

実際にJSでビデオを再生できるのはなぜですか？ここではjQueryを使ってそれを行う方法は次のとおりです。

$('video').play(); 

Answer 2

用ビデオコントロール：自動再生

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

also you can include - プレイ、 一時停止、 探して、 ボリューム、 フルスクリーントグル、 キャプション/字幕（利用可能な場合） トラック（利用可能な場合）

あなたのコードが正常に属性を追加します。

Answer 3

、私はそれ以外の質問は本当にありません、あなたはボタンがクリックされたときに動画の再生を開始することを期待することを追加するあなたの質問を更新し、この

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>