- 作者:
- 分类:知识&开发->Web->前端
- 阅读:720
- 点赞:1
- 版权:CC BY-SA 4.0
- 创建:2021-12-31
- 更新:2022-01-06
要让 ios 自动循环播放视频,需要额外的参数设置
版权声明:本文为 neucrack 的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接(持续更新):https://neucrack.com/p/399
原文链接(持续更新):https://neucrack.com/p/399
<video preload="" muted="muted" autoplay="autoplay" loop="loop" x5-playsinline="" playsinline="" webkit-playsinline="" x5-video-player-type="h5"><source src="http://wiki.sipeed.com/hardware/zh/maixII/M2A/MaixSense/assets/M2A-1.mp4" type="video/mp4">
Your brower not support video play!
</video>
muted="muted" autoplay="autoplay" loop="loop" x5-playsinline="" playsinline="" webkit-playsinline="" x5-video-player-type="h5"
静音 自动循环播放可以让大多数浏览器自动循环播放,要让 ios 自动循环播放视频,需要额外的参数设置,加后面的参数后 ios 就能自动播放了
这样做可能有些设备(比如安卓设备和微信内置浏览器)还是不能播放, 主要是为了给移动设备节约流量, 所以最好的做法是发现用户在用流量让用户主动触发播放
<div class="video_wrapper">
<video class="video_player" src="a.mp4" poster="product.img" preload muted autoplay loop="-1" x5-playsinline="" x5-video-player-fullscreen="true" playsinline="" webkit-playsinline="" x5-video-player-type="h5" >
Your brower not support video play!
</video>
<div class="play_mask" onclick="playVideo"></div>
</div>
playVideo(event) {
// remove play button and paly video
el = event.target
el.style.display="none"
player = el.parentElement.getElementsByTagName("video")[0]
player.play()
}
对于流量无限制的平台还是自动播放,这时就要判断平台是否使用了流量了,这个目前各个平台 API 做得不太完善,可以看这里 , 另外需要考虑主流特殊平台,比如 android 下的微信(ios可以),不管使用的是不是wifi,它都不允许自动播放,需要用户手动触发(2022.1.6,以后可能会变),所以需要检测微信内置浏览器做特殊处理即只要是微信浏览器就需要用户手动触发。
使用
window.WeixinJSBridge
和document.addEventListener("WeixinJSBridgeReady", function(){})
来检测微信浏览器
function isLimitedNetwork(){
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { tyep: 'unknown' };
const notLimitTypes = ["ethernet", "wifi", "wimax"]
const limitTypes = ["bluetooth", "cellular"]
var system = {
win: false,
mac: false,
x11: false,
ipad:false
};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;
if(notLimitTypes.indexOf(connection.type) >= 0){
return false
}
if((system.win || system.mac || system.x11 || system.ipad ) && (limitTypes.indexOf(connection.type)<0) ) {
return false
}
return true
}
var isWechat = window.WeixinJSBridge
if (!isWechat) {
document.addEventListener("WeixinJSBridgeReady", function () {
var players_mask = document.getElementsByClassName("play_mask")
for(var i=0; i < players_mask.length; ++i){
players_mask[i].style.display = "block"
}
}, false);
}
if(isLimitedNetwork() || isWechat){
var players_mask = document.getElementsByClassName("play_mask")
for(var i=0; i < players_mask.length; ++i){
players_mask[i].style.display = "block"
}
}else{
var players = document.getElementsByClassName("video_player")
for(var i=0; i < players.length; ++i){
players[i].play();
}
}