Question

我一直在研究如何实现HTML5视频背景网络和手机上的视频，下面是以下代码 - 它显示但不是自动启动，这是问题

<video width="100%" controls autoplay>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>

Answer 1

根据您的Chrome版本，您可能会获得视频自动播放规则的新实现：

始终允许静音自动播放。
如果符合以下条件，则允许声音自动播放：
- 用户已与域进行了互动（点击，点击等）。
- 在桌面上，用户的媒体参与度指数阈值已超过，这意味着用户之前已播放带有声音的视频。
- 在移动设备上，用户已将该网站添加到他或她的主屏幕。顶部框架可以将自动播放权限委托给他们的iframe，以允许自动播放声音。

取自：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

所以你可以尝试静音：

<video width="100%" controls autoplay muted>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>

Answer 2

在 React 中你需要在camelCase中添加标签的属性。所以在这种情况下它必须是自动播放。

Answer 3

我有类似的问题，autoplay不管使用muted都无效。出乎意料的是，将自动播放指定为驼峰式autoPlay

时，我成功了

Answer 4

确保您检查浏览器权限。有时在“许可音频”中，它可能是阻止的音频和视频 要进行更改，您可以单击浏览器地址栏的左侧。

Answer 5

它现在太旧了。但如果你想使用，我仍然有一个建议。您可以使用一件事来代替自动播放属性（因为其他人告诉它只有在静音时才始终有效）：-

function playVideo()
{
    document.getElementById("vid").play();
}

javascript 中一个非常简单的函数。确保为您的视频 ID 提供“vid”或在此处更改。视频示例

<video id="vid" loop controls>
        <source src="Videos/vid.mp4" type="video/mp4">
</video>

并在正文标签中写下：-

<body onpageshow="playVideo()">

它对我有用。也许也适合你

HTML5视频自动播放无法正常工作

5 个答案: