视频自动播放在Safari和Chrome桌面浏览器中无效

Question

我花了很多时间试图弄清楚为什么视频嵌入在这里:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

在FireFox中加载页面后开始自动播放但在基于Webkit的浏览器中无法自动播放.这只发生在一些随机页面上.到目前为止,我无法找到原因.我怀疑CMS编辑器创建了一些未封闭的标签或大量的JS.

Answer 1

我能得到的最佳解决方案就是在之后添加此代码 </video>

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

...不漂亮,但不知何故有效.

更新 最近很多浏览器只能关闭声音自动播放视频,因此您还需要为muted视频标签添加属性

<video autoplay muted>
...
</video>

Answer 2

在使用play()其他答案建议的jQuery 或DOM maniupulation 后,它在Chrome for Android(版本56.0)中仍然无法正常工作(视频不是自动播放).

按本岗位在developers.google.com,从Chrome浏览器53,自动播放选项是由浏览器的尊重,如果视频静音.

因此,使用autoplay muted视频标记中的属性可以在第53版的Chrome浏览器中自动播放视频.

摘自以上链接:

视频静音自动运行,如果同时为Android是Chrome支持如53版一旦映入眼帘的将自动开始播放的视频元素autoplay,并muted设置[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• iOS 10及更高版本的Safari支持静音自动播放.
• Firefox和UC浏览器已经在Android上支持自动播放,无论是否静音:它们不会阻止任何类型的自动播放.

Answer 3

muted与属性结合使用时它对我有用

Answer 4

事实上桌面上的Safari和Chrome不喜欢视频标签周围的DOM操作.即使在初始页面加载后视频标记周围的DOM发生变化时触发了canplaythrough事件,它们也不会在设置autoplay属性时触发播放顺序.基本上我遇到了同样的问题,直到我在视频标签周围删除了一个.wrap()jQuery,之后它按预期自动播放.

Answer 5

对我来说,问题是muted需要在video标签内添加属性.即:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Answer 6

谷歌只是改变了他们的自动播放视频政策,它必须是 muted

你可以在这里查看

所以只需添加静音

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Answer 7

我在 iPhone 上的 Safari 浏览器中播放视频时遇到问题。playsinline在标签中添加属性video就可以解决这个问题，而且很有效！

<video autoplay muted loop playsinline class="someClass">
  <source src="source.mp4" type="video/mp4">
</video>

你也会在 OSX 上的 Safari 上遇到这个问题，以防你对这个属性感到困惑playsinline，这里是解释。

移动浏览器playsinline 将在原处播放视频，而不是默认播放视频时全屏打开。

对于 OSX 上的 Safari，由于默认网站Auto-Play选项是Stop Media with Sound，因此该策略也会引入权限问题。

这就是我们需要该财产的原因muted。

Answer 8

var video = document.querySelector('video');
video.muted = true;
video.play()

只有这个解决方案对我有帮助，<video autoplay muted ...>...</video>没有用...

Answer 9

我现在刚刚看到我的视频问题

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

搜索后,我找到了一个解决方案:

如果我将"preload"属性设置为"true",则视频会正常启动

Answer 10

对于 Angular，您必须将其静音并按如下ngAfterViewInit()所示播放

\n

<video height="256" loop autoplay muted controls id="vid" #videoRef>\n         <source type="video/mp4" src="video_file.mp4"></source>\n         <source type="video/ogg" src="video_file.ogg"></source>\n</video>\n

\n

 \xe2\x80\x8b@ViewChild(\'videoRef\', { static: true }) videoRef!: ElementRef\n\n\xe2\x80\x8bngAfterViewInit(): void {\n  \xe2\x80\x8bconst media = this.videoRef.nativeElement\n  \xe2\x80\x8bmedia.muted = true \n  \xe2\x80\x8bmedia.play() \n\xe2\x80\x8b } \n

\n

Answer 11

在页面底部添加以下代码对我有用.我不知道它为什么有效:(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Answer 12

尝试这个：

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

Answer 13

Chrome不允许自动播放带有声音的视频，因此请确保将muted属性添加到这样的video标签中

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Answer 14

• 请在单词前使用muted关键字autoplay，这里是 2018 年 4 月的一些隐私更改。
• 您可以在这里阅读政策

Answer 15

我们最近解决了嵌入视频的类似问题，发现自动播放和静音属性不足以满足我们的实施。

我们在代码中添加了第三个“playsinline”属性，它解决了 iOS 用户的问题。

此修复特定于要内嵌播放的视频。来自https://webkit.org/blog/6784/new-video-policies-for-ios/：

在 iPhone 上，元素现在可以内嵌播放，并且在播放开始时不会自动进入全屏模式。没有playsinline 属性的元素将继续需要全屏模式才能在iPhone 上播放。当使用捏合手势退出全屏时，没有内联播放的元素将继续内联播放。

Answer 16

尝试换成 autoPlay.autoplay

有时似乎区分大小写。非常奇怪，因为它对autoplay我有用，但前提是我包括controls

Answer 17

尝试这个：

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

我通常就是这样做的。循环、控件和自动播放不需要值，它们是布尔属性。

Answer 18

Google 更新了自动播放政策。自动播放仅适用于静音模式。检查链接https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 19

在 Safari iPhone 上，当电池电量低且 iPhone 处于低功耗模式时，它不会自动播放，即使您具有以下属性：自动播放、循环、静音、在您的视频 html 标签上设置的内联播放。

四处走走我发现工作是让用户手势事件触发视频播放：

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

您可以在 webkit 站点中阅读有关 iOS 的用户手势和视频策略的更多信息：

https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 20

我通过将其设为静音来自动播放。我认为谷歌规则不会让 Chrome 自动播放，除非它被静音。

<video id="video" controls autoplay muted
        border:0px solid black;"
        width="300"
        height="300">
    <source src="~/Videos/Lumen5_CTAS_Home2.mp4"
            type="video/mp4" />
    Your browser does not support the video tag.
    Please download the mp4 plugin to see the CTAS Intro.
</video>