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