移動端h5視頻自動播放問題


就目前而言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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM