Chrome中的静音自动播放仍然无法正常工作

Posted 2023-05-07

【中文标题】Chrome中的静音自动播放仍然无法正常工作

【英文标题】：Muted Autoplay in Chrome still not working

【发布时间】：2018-05-18 05:06:02

【问题描述】：

我无法让 Chrome 自动播放视频。我已将视频设置为静音，它会在 Safari 和 Firefox 中自动播放，但不会在 chrome 中播放。

            <video autoplay muted poster="path to video" id="bgvid">

        <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/webm">

            <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/mp4">

        </video>    

我想让视频自动开始播放。目前视频加载，但只是静止。我读过的所有内容都说，只要静音就应该播放，但这不是我得到的结果。

【问题讨论】：

您能否发布一些工作代码来测试功能（至少在 Firefox 和 Chrome 中）？

我用路径更新了上面的代码。你是这个意思吗？

此处的代码应该可以工作，但请确保未打开数据保护程序。如果开启数据保护程序，则不会播放。

数据保护程序未开启。这仍然无法在我的 chrome 或任何 chrome 中使用。我最终使用 jQuery 来强制播放视频。可能不是最好的解决方案，但它现在有效。 $("#bgvid")[0].play();

这也可能是视频的问题......在这里遇到了类似的问题***.com/a/59377946/1717535 已修复，无需依赖事件/.play。

【参考方案1】：

虽然@richard-lindner 的解决方案对我不起作用，但它让我走上了正轨。

在我的例子中，虽然 muted 属性存在，但 Chrome 会忽略它并静默失败，除非它也在 javacript 中明确设置，例如

var video = document.getElementById("myVideo");
video.oncanplaythrough = function() 
    video.muted = true;
    video.play();

有趣的是，使用 javascript 强制自动播放但忽略 video.muted = true 行确实会在控制台中显示自动播放策略错误，这表明 Chrome 在某些情况下确实忽略了 muted 属性。对我来说，这感觉像是 Chrome 的自动播放政策的一个错误。

请注意，该错误仅在视频未缓存时发生。如果它被缓存，自动播放会按预期工作。

【讨论】：

为我工作。他们真的让这变得困难。

谢谢。这解决了问题。你是对的，它看起来像一个错误。

奇怪的是，这似乎是一个问题，即使是 VideoJS。我目前有最新版本，7.2.3。如果没有 video.muted = true，在 VideoJS 的回调中调用 player.volume() 将不起作用，其中 video 是视频元素。

+1。我可以确认在 html 中简单地分配“静音”属性对我不起作用，但添加 @Jonny Green 建议的显式属性分配确实有效。

这让我很反感，这很完美。这就像谷歌浏览器正在努力成为 IE8 的下一个版本......

【参考方案2】：

您可以在视频标签上使用oncanplay="this.muted=true"

<video  muted loop autoplay oncanplay="this.muted=true">
    <source src="your src" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

【参考方案3】：

下面的示例在 Mac (10.12.6) 上以 chrome（版本 62.0.3202.94 ）播放，代码改动很小：

<video autoplay muted poster="path to video" id="bgvid">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>  

可能是 Safari 和 Friefox 正在播放 mp4 并 chrome 浏览 webm，问题与 webm 视频本身有关，而不是您的 HTML5 代码。

【讨论】：

我可以在 chrome 中查看您上面的视频，但即使我将完全相同的代码放入我的网站，Chrome 仍拒绝播放。这很令人沮丧，因为没有错误。无论出于何种原因，都无法在我的网站上运行。

如果它与上面的代码（包括视频 URL）完全相同，那么听起来您的网站可能正在使用一些更复杂的视频播放器，它正在寻找页面中的视频元素并管理播放。

我在没有使用第三方视频播放器时遇到了完全相同的问题

@timstermatic - 你的意思是上面的代码 sn-p 不起作用吗？我刚刚在 Chrome 浏览器中再次尝试，它对我来说很好。

@mick，我的意思是当我将上面的代码放在我自己的页面中时。但是我发现了我的问题。视频位于滑块中，您无法自动播放已变异的 DOM 元素中的视频。如果我在样板 HTML 模板中运行该示例，它将完美运行。

【参考方案4】：

主要答案对我有用 - 但万一有人试图让它在苹果手机上工作，你必须使用“playsinline”属性才能工作。例如：

<video playsinline autoplay muted loop id="myVideo">
        <source src="xen.mp4" type="video/mp4">
    </video>

【参考方案5】：

对于那些在 JavaScript 中创建元素的人，这是我用来配置元素以在 Chrome 中正确自动播放的 JavaScript 函数：

function configureVideoElementForAutoplay (videoElement) 
  videoElement.setAttribute('playsinline', '');
  videoElement.setAttribute('muted', '');
  videoElement.setAttribute('autoplay', '');
  videoElement.muted = true;

例子：

let vid = document.createElement('video');
configureVideoElementForAutoplay(vid);

感谢@Jonny Green 指出直接“静音”属性分配的必要性。