Как добавить атрибут autoplay в html5 видеоплеер

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

Установка флага автовоспроизведения недостаточно для воспроизведения видео, вы должны вызвать метод 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>