h5-video自动播放兼容性处理

HTML<video/>视频无法自动播放

最新|解决前端微信浏览器中video标签不能自动播放视频问题
最近前端有一个需求要求在网页中自动播放视频，PC端没有问题，移动端是有问题的，移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

网上有很多解决方案，都不能真正的解决问题，于是自己尝试了一下。

video 标签属性

src: 设置显示视频路径
controls: 显示控制栏
loop: 控制视频循环播放
autoplay: 自动播放
muted:设置静音播放

测试pc端、移动端浏览器兼容情况 ( 支持✔ 不支持 ✘ 暂无 ∅)

<div class="video-box"><video muted preload autoplay loop controls="false" id="myVideo" type="video/mp4" width="100%" webkit-playsinline="true"x-webkit-airplay="allow" playsinline="" x5-video-player-type="h5" x5-video-orientation="portrait"x5-video-player-fullscreen="portraint"src="https://static.yximgs.com/udata/pkg/fe/kwai_video.a7616d99.mp4"poster="https://website.didiglobal.com/dist/img/homepage1-app.fb9b0c10.jpg">对不起，您的手机不支持本系统</video><div class="btn-play"></div><div class="processBar"><div class="playProcess"></div><div class="loadProcess"></div></div></div>

video属性：muted autoplay loop

平台/浏览器	自带	safari	uc	微信	QQ	firefox	chrome	百度	360	IE	Edge
ios	✔	✔	✘	✘	✘	✔	✔	✔	✔	∅	∅
pc	∅		✔	∅	✔	✔	✔	✔	✔	✔	✔
android		∅	✔	✘	✔	✘		✔	✔	∅	∅
华为	✔	∅	✔	✘	✔	✘		✔	✔	∅	∅
小米	✔	∅		✘		✘				∅	∅
vivo/oppo		∅		✘						∅	∅

video属性：autoplay loop

平台/浏览器	自带	safari	uc	微信	QQ	firefox	chrome	百度	360	IE	Edge
ios	✘	✘	✘	✘	✘	✘	✘	✔	✘	∅	∅
pc	∅		✔	∅	✔	✘	✘	✔	✔	✔	✔
android		∅	✔	✘	✔	✘		✔	✔	∅	∅
华为	✔	∅	✔	✘	✔	✘		✔	✔	∅	∅
小米	✔	∅		✘		✘				∅	∅
vivo/oppo		∅		✘						∅	∅

综上所述 muted静音	true	false
自动播放情况	pc端基本浏览器都兼容 ios端除uc与QQ，微信，其余兼容 android端基本浏览器都兼容	pc端除*chrome,firefox*外，基本浏览器都兼容 ios端除百度外，基本都不兼容 android端基本浏览器都兼容

video自动播放被微信(x5内核)拦截，引入微信SDK

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script> //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('car_audio').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('car_audio').play(); document.getElementById('video').play(); }, false);
</script>

有一些Android部分手机生效，部分手机不生效

自动播放需要满足几个条件所有移动端手机都可以自动播放：

1.必须要有用户点击事件touch
2.接收点击事件的标签和video标签不能是父子关系(就是body接收的点击事件调用video的play方法，播放器也是不会播放视频的
3.接收点击时候后，立即执行play()方法，网络请求后调用play()方法可能会无效

解决方案

思路

在页面初始化话的时候写一个video标签，这个video标签在可见区域之外，video标签和需要点击事件控件不是父子关系，当用户点击播放按钮时，立刻调用play()方法。设置video标签的样式到可见区域内，通过z-index控制层级关系，就能实现自动播放。

h5-video自动播放兼容性处理相关推荐

微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
【h5 video】播放与暂停静音与取消静音
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止.我的代码是这样的: $('#playMovie1') ...
PC端和移动端都支持视频video自动播放的代码
需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作,方向是国家级非物质文化遗产「汝瓷」,想在他们官方网站上增加短视频的功能,将抖音的内容页上传到网站上. 其实这个功能并不复杂,只需要开通上 ...
解决iOS h5 audio自动播放（亲测有效）
微信H5页面,实现audio自动播放: function initMusic() {//动态创建一个audio节点var audio = document.createElement('audio') ...
video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...
说一下几个要求: 页面打开自动播放当不能自动播放时,第一次点击(document)就触发视频播放因为播放控制条会挡住视频内容,所以隐藏,但是点击 video 元素的时候可以控制暂停和播放以上要求 ...
如何使视频video自动播放
格式:<video src="***.mp4" ></video> 在PC端要自动播放插入两个代码即可: 把自动播放的属性加上此时PC端并没有自动播放只 ...
解决H5 audio自动播放无效问题（应用于一切环境的一切浏览器）
通过查询多个文档改了很多的script但是还是没有用的,以下方法暴力简单这个办法需要用户点击了页面才会自动播放音乐. <audio id="bgmusic" src=&qu ...
H5背景音乐自动播放和暂停
在微信里,音乐不能自动播放,为了让其自动播放,通过调用微信接口实现,代码如下: html: <audio id="yy" autoplay preload src=" ...
H5 背景音乐自动播放（兼容IOS和Android）
首先看下效果图: 要实现的效果: 1.小icon自动旋转 2.音乐自动播放一. 小icon css 自动无限旋转 <img class='musicImg' src='' /> .mus ...

h5-video自动播放兼容性处理

HTML<video/>视频无法自动播放

video 标签属性

解决方案

思路

h5-video自动播放兼容性处理相关推荐

最新文章

热门文章