HTML5视频无法播放/自动播放

Question

我想在div中添加一个视频（我想把它作为这个元素的背景视频）。

我添加了视频，我看到了视频的第一张图片，但它无法启动/播放。

当我读到关于HTML5和视频时，我想我已经设置了它需要的所有属性，但是一定有一个我看不到的错误。

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>

我在控制台或网络报告中看不到任何错误。

这里https://dev.w3.org/html5/pf-summary/video.html#attr-media-autoplay我读到“自动播放DOM属性必须反映同名的内容属性”

云是我需要的点吗？这是什么意思？

谢谢你帮我解决了！

Answer 1

尝试删除div中的contenteditable="true"。

<div class="myclass" id="caption">
    <video controls autoplay>
        <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4">
    </video>
</div>

Answer 2

尝试设置autoplay="autoplay"您很可能遇到浏览器问题或有扩展或阻止其自动播放的东西。

提到的Similar question

Answer 3

大多数浏览器要求用户在未静音的情况下启动视频。尝试静音。

像这样：

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="muted" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>