HTML 5 的视频元素的自动播放属性在 Firefox 中工作但在 Chrome 或 Opera 中不工作答案

【问题标题】：Autoplay attribute of video element of HTML 5 working in Firefox but not in Chrome or OperaHTML 5 的视频元素的自动播放属性在 Firefox 中工作但在 Chrome 或 Opera 中不工作
【发布时间】：2018-08-30 08:43:44
【问题描述】：

我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <video width="400" autoplay>
        <source src="../Videos/mov_bbb.mp4" type="video/mp4">
        <source src="../Videos/mov_bbb.ogg" type="video/ogg">
        <source src="../Videos/mov_bbb.webm" type="video/webm">
        Your browser does not support autoplay HTML5 video tag.
    </video>
    <p><span>Video courtesy of </span><a href="http://bigbuckbunny.org/" target="_blank">Big Buck Bunny</a></p>
</body>
</html>

在 Firefox 中打开文件后，一切正常。

但是，在 Chrome 或 Opera 中打开文件时，会出现静止图像，但什么也没有发生。

为什么会这样？

我使用的是 Ubuntu 18.04

【问题讨论】：

标签： html google-chrome firefox html5-video ubuntu-18.04

【解决方案1】：

有点解决方法。在关闭 /video 标记之后添加以下内容可能会起作用。

<script> 
    document.getElementById('vid').play(); 
</script>

这对你有用吗？

编辑：经过一些额外的挖掘，我偶然发现了这篇文章https://stackoverflow.com/a/42414858/6524598。如果视频的音频被静音，chrome似乎只尊重视频的自动播放。这意味着以下内容可能也适用于您：

<video width="400" autoplay muted >
    <source src="../Videos/mov_bbb.mp4" type="video/mp4">
    <source src="../Videos/mov_bbb.ogg" type="video/ogg">
    <source src="../Videos/mov_bbb.webm" type="video/webm">
    Your browser does not support autoplay HTML5 video tag.
</video>

【讨论】：