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

 

。是H5的新标签，使用如下：

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

浏览器支持

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

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

 

提示和注释

提示：可以在 标签之间放置文本内容，这样不支持

---

可选属性

New：HTML5 中的新属性。

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

 

 

 

 

 

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

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

 

实现自动播放策略：

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

 

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

 

1、视频元素添加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允许自动播放。