HTML5 视频自动播放不起作用

Posted 2023-05-07

技术标签:

【中文标题】HTML5 视频自动播放不起作用【英文标题】：HTML5 Video autoplay not working 【发布时间】：2018-09-24 03:43:57 【问题描述】：

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

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

【问题讨论】：

显示您的 video 标签以及您正在使用的所有属性。您是在桌面还是移动设备上进行测试？你在哪个浏览器中测试过？在桌面上我使用的是 chrome 浏览器尝试静音看看是否像这样自动播放

【参考方案1】：

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

始终允许静音自动播放。在以下情况下允许自动播放声音：用户与域进行了交互（点击、点击等）。在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。在移动设备上，用户已将网站添加到他或她的主屏幕。 ***框架可以将自动播放权限委托给其 iframe，以允许自动播放声音。

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

所以你可以试试静音：

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

【讨论】：

这个代码对我有用，谢谢【参考方案2】：

无论muted 的使用如何，autoplay 都没有任何效果，我也遇到了类似的问题。没想到我在指定自动播放为驼峰式时成功了autoPlay

【讨论】：

我不敢相信，但这解决了我的问题。非常出乎意料和无证。我认为 HTML 不区分大小写！似乎它在 Chrome 89 中不再工作了。我也遇到过这种情况，我认为是因为视频没有音频，并且由于某种原因，自动播放正在播放视频没有的音频并导致错误。【参考方案3】：

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

【讨论】：

【参考方案4】：

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

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()">

它对我有用。也许对你来说也是

【讨论】：

【参考方案5】：

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

【讨论】：

以上是关于HTML5 视频自动播放不起作用的主要内容，如果未能解决你的问题，请参考以下文章