html video 标签播放MP4视频 在 ios 和微信中自动循环播放

<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();
    }
}