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