H5的视频解决方案(2) —— chrome自动播放问题

2. chrome自动播放问题

(1) 背景和问题

比较明确的是在mobile中，iOS不允许自动播放，但是安卓是可以的。为了兼容性，一般采用的是点击播放按钮播放，或者首次触屏后开始播放。

然而最近遇到的问题：在chrome浏览器中页面加载完成之后播放视频会失败，并且出现如下报错：

(2) chrome条款

上图中的链接为：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

了解到在2018年4月Google出台了关于Chrome自动播放的限制，如下：

Muted autoplay is always allowed.

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 his or her home screen.

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

(3) 解决方案

[1] 几种解决方式

静音播放
针对网页中比较常见的video作为background的情况，并不希望用户感受到这是个视频或者去点击播放按钮。所以，最简便的方法是将视频直接静音，保证其能自动播放。

<video id="video" muted autoplay src="">

静音播放，提供关闭静音按钮
先将视频静音保证其开始播放，在视频上增加按钮，用户可以点击取消静音。

<button id="unmute" onClick="document.getElementById('video').muted = false;"></button>

不自动播放，提供播放按钮
对于不希望静音的视频，可以显示播放按钮，用户点击播放按钮后再进行播放。

[2] 代码实现

可以通过play方法返回的Promise（什么是Promise?）判断是否播放被禁止了。如果禁止了，静音后再播放或者显示播放按钮。

var mp4 = document.getElementById('video');
var promise = mp4.play();if (promise !== undefined) {promise.then(function(){// Autoplay started!}).catch(function() {// Autoplay was prevented.//--静音再播放--mp4.muted=true;mp4.play();//--显示播放按钮--//show a "Play" button so that user can start playback.});
}

H5的视频解决方案(2) —— chrome自动播放问题相关推荐

H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案
怎么让优酷视频在网页中自动播放方法
优酷视频在网页中自动播放: 方法一 1．首先在优酷复制得到欲贴视频的代码, <embed src="http://player.youku.com/player.php/sid/XMz ...
Android 基于GSYVideoPlayer实现短视频软件上下滑自动播放视频
先放效果图两个视频的地址: private final String mp4_a = "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212 ...
关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
阻止YouTube视频在Firefox中自动播放
It drives me crazy that YouTube videos start playing automatically. It's especially annoying when yo ...
【H5-chrome】chrome自动播放音频的问题
在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频.(Google的某些做法还真是令开发者不爽).就算你为video或audio标签设置了auto ...
自动点击器如何设置最快_微视APP如何设置自动播放视频-微视APP设置自动播放视频的方法...
微视APP是一款功能实用的短视频软件,在手机上安装这款软件之后就可以在使用手机的时候点击打开微视,查看一些自己感兴趣的视频,现在很多视频应用都是采用滑动的方式来进行切换视频,如果用户的手不方便进行滑动 ...
网页引用优酷视频并添加封面自动播放
引用优酷视频可以减轻公司的服务器压力,而且和自己上传保存视频相比会方便轻松许多,不过相对的需要忍受广告. 首先你需要在优酷里找到你要引用的视频,或者自己上传.然后打开会有一个分享按钮: 以我使用的第二 ...
开机自动播放视频，开机就自动播放视频，开机自动播放u盘视频
因客户要求,开机自动播放视频,不需要电脑控制,通电自动循环播放视频. 电脑成本太高,最少也要800元,个头太大,解码也不是太好,控制不太方便, 于是就给客户推荐了一个'企鹅安卓机顶盒',个头小,解码速 ...