Video在网页和移动端无法自动播放问题？?

 <video> 标签介绍

<video> 标签定义视频，比如电影片段或其他视频流。支持三种视频格式：MP4、WebM、Ogg。是H5的新标签，使用如下：

//autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放

<video width="320" height="240" autoplay="autoplay" controls loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Element	谷歌	IE	火狐	safari	opera
<video>	4.0	9.0	3.5	4.0	10.5

 

提示和注释

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

---

可选属性

New：HTML5 中的新属性。

属性	值	描述
autoplayNew	autoplay	如果出现该属性，则视频在就绪后马上播放。
controlsNew	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
heightNew	pixels	设置视频播放器的高度。
loopNew	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedNew	muted	如果出现该属性，视频的音频输出为静音。
posterNew	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadNew	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcNew	URL	要播放的视频的 URL。
widthNew	pixels	设置视频播放器的宽度。

 

 

 

 <video>标签已经添加 autoplay="autoplay" 不能自动播放的问题？

 

以下原因可能导致不能自动播放：

1. chrome6以及更高的版本不允许媒体自动播放；
2. safari 阻止自动播放视频。opera 阻止autoplay；
3. 出于用户体验，节省流量的考虑，移动端禁止自动播放；
4. 视频文件太大，加载时间过长或错误；

 

实现自动播放策略：

• 静音自动播放总是被允许的。
• 用户已经产生交互（点击触摸滑动等..） ，这里的交互指的是只要用户在页面中用有了操作，而不是说一定要用户点击audio或者video去播放
• 使用iframe授权自动播放
• chrome提高MEI指数（?）
• 移动端用户将网站添加到home screen(没试过)

 

可以使用以下方式尝试解决：

 

1、视频元素添加muted 属性，如<video controls muted>，Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 6 支持 muted 属性。注意： Internet Explorer 9 及更早IE版本不支持<video> 的 muted 属性。

 

2、在用户交互(点击，触摸滑动等操作)后，使用.paly()方法播放。注意：用户没有产生交互前调用play()会抛出异常。

/**video.play()返回一个promise，未禁止则resolve，禁止则reject**/
let video = document.getElementById("video");
let audio = document.getElementById("audio");
let videoPlay = video.play();
let audioPlay = audio.play();

videoPlay.then(()=>{
    console.log('可以自动播放');
}).catch((err)=>{
    console.log(err);
    console.log("不允许自动播放");

    //视频元素可以选择静音后再播放,提示用户打开声音
    video.muted=true;
    video.play();

    //也可以在用户交互后调用.play()
    // ...
});

audioPlay.then(()=>{
    console.log('可以自动播放');
}).catch((err)=>{
    console.log(err);
    console.log("不允许自动播放");

    //音频元素只在用户交互后调用.play(),
    // ...
});

 

3、使用iframe允许自动播放。

<iframe src = "http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201808/10467.wav" allow = "autoplay"/>

 

4、可以将ogg转为为mp4格式，尽量压缩文件大小到2M以下，尽量将视频文件放置在文件根目录下；

 

5、android 4.2 webview：添加了是否需要用户手势去触发音视频的播放开关，默认为true(需要用户手势触发)。
将webview的这个开关设置为不需要用户触发：mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);

IOS h5 webview  ：IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放.

 

 

 

参考网址：https://www.jianshu.com/p/c3c6944eed5a