html 5 视频不会自动播放答案

【问题标题】：html 5 video will not autoplayhtml 5 视频不会自动播放
【发布时间】：2020-11-04 12:20:06
【问题描述】：

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

<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() 失败，因为用户没有先与文档交互。

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

【问题讨论】：

标签： html5-video

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

就是这样！

【讨论】：

我已经尝试过了，这就是 canplay 事件发生的情况。但是当我尝试播放视频时，我得到“play() 失败，因为用户没有先与文档交互”。错误