移动端h5视频自动播放问题

时间：2024-02-17 06:57:49

就目前而言h5在视频设置autoplay属性的前提下：

Android暂不支持视频自动播放
ios10以上版本支持视频自动播放，以下版本不支视频自动播放

方案 1

添加弹框提示，采用点击播放

方案 2

使用jsmpeg.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSMpegPlayer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <style>
    html,body{
        padding: 0;
        margin: 0;
    }
    .msg-wrap{
        /* position: fixed;
        top: 0;
        left: 0; */
        background: #fff;
        border: 1px solid #000;
    }
    .video-wrap{
        width: 100%;
        display: none;
    }
    </style>
</head>
<body>
    <!-- <video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"></video> -->
    <video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="https://resource.tuixb.cn/beta/00000000-0000-0000-0000-000000000000/KMA/default/01f67872-7439-4a01-9b3e-4d46c0d650f1.mp4"></video>
    <canvas class="video-wrap" id="video-android"></canvas>
    <div class="msg-wrap" id="msgTxt">loading...</div>
    <div>测试圣诞节睡大觉1</div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!-- <script src="./js/jsmpeg.js"></script> -->
    <script src="http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js"></script>
    <script>
        var msgTxt = document.getElementById(\'msgTxt\');
        var video = document.getElementById(\'video-ios\');
        var canvas = document.getElementById(\'video-android\');

        //检测是否为非安卓浏览器并作处理
        var check = !! navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

        if(check){
            msgTxt.innerHTML = "not Android mode"
            video.style.display="block"
            video.play()
            document.addEventListener(\'WeixinJSBridgeReady\',function () {
                video.play()
            },false)
            //监听video加载完成
            video.addEventListener("loadedmetadata",function(){
                msgTxt.innerHTML = "not Android mode:videoPlaying"
            })
            //监听video播放结束
            video.addEventListener("ended",function(){
                msgTxt.innerHTML = "not Android mode:videoEnd"
            })
        }else{
            // out.ts播放的视频文件
            // jsmpegPlay(canvas,\'1_BG_4s_5.ts\',startCallBack,playingCallBack,endCallBack)
            jsmpegPlay(canvas,\'out.ts\',startCallBack,playingCallBack,endCallBack) 
        }

        function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
            var player = new JSMpeg.Player(
                vVideo ,{
                    canvas: Vcanvas, 
                    loop: false, 
                    autoplay: true,
                    startSign: true,
                    startCallBack: startFun,
                    playingCallBack: playingFun,
                    endCallBack: endFun
                });
        }
        
        //视频开始播放（即解码完成）执行
        function startCallBack() {
            msgTxt.innerHTML = "Android mode:videoPlaying"
            canvas.style.display="block"
        }
        //视频播放进度
        function playingCallBack(currentTime) {
            // console.log(currentTime)
        }
        //视频播放完成执行
        function endCallBack() {
            msgTxt.innerHTML = "Android mode:videoEnd"
        }
    </script>
</body>
</html>

 

 

相关文章