<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" 不能自动播放的问题？

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

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

实现自动播放策略：

静音自动播放总是被允许的。
用户已经产生交互（点击触摸滑动等..） ，这里的交互指的是只要用户在页面中用有了操作，而不是说一定要用户点击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

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

手机 html自动播放视频格式,Video 在网页和移动端无法自动播放问题？?
标签介绍标签定义视频,比如电影片段或其他视频流.支持三种视频格式:MP4.WebM.Ogg.是 H5 的新标签,使用如下: //autoplay表示视频自动播放,controls表示显示视频控制器, ...
解决移动端音频自动播放问题
解决移动端音频自动播放问题参考文章: (1)解决移动端音频自动播放问题 (2)https://www.cnblogs.com/lcf1314/p/5867010.html 备忘一下.
HTML5中的audio在手机端和微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的通常解决方法是给一个交互事件,一定要是交互事件标签:<aud ...
android ios 实时视频播放,vue 移动端视频自动播放兼容ios，安卓
安卓初始化自动播放首先创建一个jsmpeg.js文件,代码源文件放在百度网盘了,请自行下载百度网盘下载地址链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYe ...
网页上线后音频不能自动播放
一.问题描述开发环境谷歌浏览器本地测试通过,网站上线后的音乐不播放,而是自动下载? 开发环境safari浏览器中,音频不播放. 二.问题分析用audio或者embed标签都有问题,为了节省用户的流 ...
移动端背景音乐自动播放
背景音乐自动播放手机端 (Android.ios) 亲测有效 **html标签** ----------<audio style="display:none; height: 0 ...
网页设置的音频不能自动播放
前言:有些设备禁止了autoplay 属性 html: <audio src="https://static.frdic.com/web/music/Always.mp3" ...
html ios音乐自动播放muted,video下autoplay属性无效的解决方法(添加muted属性)
背景:video下载入ogg格式视频,并设置自动播放属性autoplay,但是使用Chrome预览时,视屏画面已加载出来,但是无法自动播放,F5刷新后可以自动播放.使用火狐浏览器可以自动播放.最初代码 ...
网页中视频内容自动播放
目前主流的浏览器中已经禁止带声音的媒体自动播放.具体内容在这里chrome自动播放策略(可能国内网络访问不了).此处重点是带声音的媒体自动播放. 里面也说明了集中播放的方式静音播放.只要将video ...

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