html 5 个视频不会自动播放

Question

我有一个应该自动播放的视频，但它不会。我是这样设置的：

<video id="video" autoplay muted playsinline loop
    poster="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.jpg"
    #video>
    <source
        src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.webm"
        type="video/webm">
    <source
        src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.mp4"
        type="video/mp4">
    <source
        src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.ogv"
        type="video/ogg">
</video>

如您所见，它已静音，因此根据 this document 它应该播放，但没有播放。我试图向 canplay 方法添加一个函数，但是当我这样做时，我得到了这个错误：

DOMException: play() failed because the user didn't interact with the document first.

这就是我找到上面文档的原因。有谁知道我该如何解决这个问题？

Answer 1

默认情况下，在较新版本的浏览器中，出于用户体验和防止突然播放视频的考虑，有时 autoplay 属性将不起作用。你可以通过页面加载函数中的一行javascript来修复它：

document.getElementById("video").play();

就是这样！

Answer 2

如果您只是使用您有问题的 HTML - 视频播放得很好。

如果您试图强制它使用 JS 播放 - 您会收到此错误 - 因为这是人们试图绕过在浏览器中阻止自动播放的一种方式。要使 JS 中的 play() 起作用，用户必须首先单击页面上的某个位置。

html 5 个视频不会自动播放

html 5 video will not autoplay

html5-video