标签介绍

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

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

您的浏览器不支持 video 标签。

浏览器支持

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

Element

谷歌

IE

火狐

safari

opera

4.0

9.0

3.5

4.0

10.5

提示和注释

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

可选属性

New：HTML5 中的新属性。

属性

值

描述

autoplay

如果出现该属性，则视频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

pixels

设置视频播放器的高度。

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

muted

如果出现该属性，视频的音频输出为静音。

URL

规定视频正在下载时显示的图像，直到用户点击播放按钮。

auto

metadata

none

如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

srcNew

URL

要播放的视频的 URL。

pixels

设置视频播放器的宽度。

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

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

chrome6 以及更高的版本不允许媒体自动播放；

safari 阻止自动播放视频。opera 阻止 autoplay；

出于用户体验，节省流量的考虑，移动端禁止自动播放；

视频文件太大，加载时间过长或错误；

实现自动播放策略：

静音自动播放总是被允许的。

用户已经产生交互(点击触摸滑动等..) ，这里的交互指的是只要用户在页面中用有了操作，而不是说一定要用户点击 audio 或者 video 去播放

使用 iframe 授权自动播放

chrome 提高 MEI 指数(?)

移动端用户将网站添加到 home screen (没试过)

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

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

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