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

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

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

但是为什么你可以用JS实际播放视频呢？以下是使用jQuery的方法：

$('video').play();

Answer 2

试试这个

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用 JavaScript 启用该属性，但您需要为视频元素添加 ID：

HTML

<video id="myVideo" controls>
    ...
</video>

然后你可以像这样获取元素并设置属性：

JavaScript

document.getElementById("myVideo").autoplay = true;

Answer 4

使用视频控件：自动播放

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

also you can include - 播放，暂停，求，体积，全屏切换，字幕/字幕（如果有），跟踪（如果可用）

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

4 个答案: