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

Question

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

20

我一直在研究如何在Web和移动端将HTML5视频实现为背景视频，以下是相关代码 - 它可以显示但无法自动启动，这就是问题所在

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

- Manoj Singh

展示你使用的所有属性的 video 标签。 - Baumi

你是在桌面端还是移动端进行测试？ - j08691

你在哪个浏览器中测试了吗？ - Pv-Viana

在桌面上，我正在使用 Chrome 浏览器。 - Manoj Singh

3

请尝试将音频静音，以查看视频是否会自动播放，示例代码如下：<video width="100%" controls autoplay muted> - August

我在这里测试http://www.websiteappo.com/，这是我的视频链接http://www.websiteappo.com/img/342125205.mp4。 - Manoj Singh

7个回答

16

我有类似的问题，无论如何使用muted都没有效果，autoplay也同样无效。但出乎意料的是，当将autoplay指定为驼峰式的autoPlay时，我获得了成功。

- theplum

我简直不敢相信，但这解决了我的问题。非常出乎意料且未记录在案。我以为HTML是不区分大小写的！ - farnsy

似乎在 Chrome 89 中不再起作用了。 - Piranna

我也遇到过这种情况，我认为是因为视频没有音频，而且由于某种原因，自动播放正在播放视频没有的音频，从而导致错误。 - Glenio

4

在React中，您需要使用驼峰式命名法添加标签的属性。因此，在这种情况下，它必须是autoPlay。

- Mehdi

1

这个帖子现在太老了。但如果你想使用的话，我仍然有一个建议。你可以使用一个东西来代替autoplay属性（因为其他人说它只有在同时具有静音功能时才能正常工作）：

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

一个非常简单的JavaScript函数。确保将您的视频ID命名为“vid”或在此更改。视频示例

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

并在body标签中写入以下内容：

<body onpageshow="playVideo()">

这对我有效。也许对你也有用。

- I-am-developer-9

1

只需将 autoplay 改为驼峰命名法 autoPlay 即可。

<video  controls autoPlay loop muted>
    <source  src={myvideo} type="video/mp4"/>
    <source src={myvideo} type="video/ogg"/>
    Your browser does not support the video tag.
</video>

- Mahmoud Hamdy

1

我遇到了类似的问题。解决方法是使用驼峰命名法 autoPlay。因此，以下代码应该可以正常工作：

<video autoPlay muted>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>

- nuphy

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

0

请确保您检查浏览器权限。如果网站不安全（http），则将禁用网站上的自动播放。要进行更改，您可以单击浏览器地址栏左侧并单击允许音频和视频。

- Abhi Burk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- August · Accepted Answer

根据您的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>