Video-JS 自动播放属性不起作用

编程问答 2022-04-24

问题描述

我有一个带有 video-JS（版本 5.20.5）的 HTML 视频标签，这是我的代码：

<video id="my-video" class="video-js" controls="" autoplay="true" preload="auto" style="width:1006px;height:562px;" >
    <source id="mysource" src="{$movie}" type='video/mp4' controls='false' />
    <p class="vjs-no-js">
        To view this video please enable JavaScript,and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

我需要强制它自动播放，但我不是太幸运。我试过 autoplay="true"; autoplay="" 和 autoplay="autoplay"。

这些都没有奏效。

我什至只尝试了 autoplay 但由于我将它用于 XML 包，它会导致我的页面崩溃并显示错误：

预期的令牌是 '='

有什么想法吗？

编辑：我已经在使用静音属性的“半途而废的解决方案”之前实现了，但我认为它不值得一提。无论如何，如果有人感兴趣，这是在上面的代码之后添加的代码：

<script>
options = {
autoplay: true,muted: true
video = videojs('my-video',options);
</script>

解决方法

您可能必须将 muted 与 autoplay 属性结合使用才能使其自动播放，具体取决于浏览器。否则你应该使用 JS/JQuery。

这是一个例子：

<video id="my-video" class="video-js" controls="" autoplay="true" preload="auto" style="width:1006px;height:562px;" >
    <source id="mysource" src="{$movie}" type='video/mp4' controls='false' />
    <p class="vjs-no-js">
        To view this video please enable JavaScript,and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

<script>
document.getElementById('my-video').play();
</script>
autoplayautoplayjavascriptvideo.js