Question

我有一个不是自动播放的视频：

  <video preload="auto" autoplay="autoplay" loop="loop" muted="muted" className="myVideo" id="vidAd">
        <source src={video} type="video/mp4"/>
        <source src={video} type="video/ogg"/>
        <source src={video} type="video/webm"/>
      Your browser does not support the video tag.
    </video>

目前视频显示但未自动播放。

我尝试用javascript解决这个问题，但我不确定正确的语法是什么

<script type="text/javascript">
$(document).ready(function() {
   var vid = document.getElementById("vidAd");
   vid.autoplay = true;
   vid.load();
});
</script>

Answer 1

尝试：

HTML

<video preload="auto" loop="loop" muted="muted" className="myVideo" id="vidAd">
    <source src={video} type="video/mp4"/>
    <source src={video} type="video/ogg"/>
    <source src={video} type="video/webm"/>
  Your browser does not support the video tag.
</video>

JS

var vid = document.getElementById("vidAd");
vid.autoplay = true;
vid.load();

Answer 2

您使用的浏览器是什么？我认为，自动播放属性不适用于IE9以下的浏览器。

此外，您无需为属性“autoplay”

提供值

<video preload="auto" className="myVideo" id="vidAd" loop muted autoplay>
    <source src={video} type="video/mp4"/>
    <source src={video} type="video/ogg"/>
    <source src={video} type="video/webm"/>
  Your browser does not support the video tag.
</video>

您是否尝试删除除自动播放之外的视频元素上的所有属性？也许其中一个属性存在错误（循环和静音也不需要'值'）。

Answer 3

我也遇到了同样的问题而且我得到了它的工作。试试这个。

HTML

<video preload="auto" className="myVideo" id="vidAd" loop muted>
    <source src={video} type="video/mp4"/>
    <source src={video} type="video/ogg"/>
    <source src={video} type="video/webm"/>
  Your browser does not support the video tag.
</video>

JS

var vid = document.getElementById('vidAd');

vid.onloadeddata = function(event) {
  event.target.play();
}

vid.onloadeddata();

这将触发一旦加载视频后将发生的事件监听器onloadeddata。然后它将启动视频播放活动。

视频不能在Html中自动播放

3 个答案: