HTML5视频自动播放无法在Chrome浏览器中运行 [英] HTML5 video autoplay not working in chrome

问题描述

我正在尝试使用html5视频在滑块中显示视频.使用controls参数(显示控件)可以很好地工作.但是，当我添加autoplay时，它不会自动播放，因此我搜索了可能的原因，发现选择框仅允许静音视频自动播放.

I am trying to show a video in my slider using a html5 video. This works fine with the controls parameter (showing controls). But when I add autoplay it doesn't autoplay so I searched why that could be and found out chome only allows muted videos to autoplay.

因此我向其中添加了muted参数，但是当我这样做时，我的整个视频都会变黑并且仍然无法自动播放.

So I added the muted parameter to it, but when I do that my entire video turns black and is still not autoplaying.

为什么会这样?

我的代码:

<div class="r-slider-item">
    <video width="100%" height="100%" autoplay muted loop>
      <source src="assets/watertuin.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="container">
      <div class="r-slider-top-content">
        <h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
        <a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
      </div>
    </div>
</div>

在Firefox和IE 11中，它可以正常工作.

In Firefox and IE 11 it works just fine.

推荐答案

根据Google的最新政策，静音视频可以在Chrome中自动播放.在以下情况下，可以自动播放声音:

As per Google's latest policies, Muted videos can autoplay in Chrome. Autoplay with sound is allowed if:

• 用户已与域进行了交互(单击，点击等).
• 在台式机上，用户的媒体参与度索引"阈值为 交叉，表示用户以前曾播放带声音的视频.
• 在移动设备上，用户已[将网站添加到主屏幕中.]

• User has interacted with the domain (click, tap, etc.).
• On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
• On mobile, the user has [added the site to their home screen].

顶部框架可以将自动播放权限委派给其iframe，以允许自动播放声音.

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

此外，将以下标签放在<source>标签之后:-

Also, put the following tag after your <source> tag:-

<source src="assets/watertuin.ogg" type="video/ogg">

看看，如果现在可以使用.

See, if it works now.

在以下位置查看有关Google自动播放政策更改的更多信息:- https ://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Check more about Google autoplay policy changes on:- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

这篇关于HTML5视频自动播放无法在Chrome浏览器中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！