前言:
在安卓手機上，使用video播放視頻有個問題，video控件層級會永遠在頂層，不利于視頻互動H5開發(fā)，而IOS手機上不會有此問題。
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
x5-video-player-type="h5"? ?只適用于微信瀏覽器
注意:
1.jsmpeg 需要將視頻轉為.ts的文件
? ? ?先安裝ffmpeg,然后執(zhí)行以下命令,將mp4格式的文件轉成 .ts(用命令行轉的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路徑不太好找,建議全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隱藏控制條等設置
3.http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js? ?請使用此js,原作者的js沒有回調設置
4.https://github.com/phoboslab/jsmpeg? 原作者github地址
解決方案:jsmpeg插件
<!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>
? ? <canvas class="video-wrap" id="video-android"></canvas>
? ? <div class="msg-wrap" id="msgTxt">loading...</div>
? ? <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()
? ? ? ? ? ? //監(jiān)聽video加載完成
? ? ? ? ? ? video.addEventListener("loadedmetadata",function(){
? ? ? ? ? ? ? ? msgTxt.innerHTML = "not Android mode:videoPlaying"
? ? ? ? ? ? })
? ? ? ? ? ? //監(jiān)聽video播放結束
? ? ? ? ? ? video.addEventListener("ended",function(){
? ? ? ? ? ? ? ? msgTxt.innerHTML = "not Android mode:videoEnd"
? ? ? ? ? ? })
? ? ? ? }else{
? ? ? ? ? ? // 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
? ? ? ? ? ? ? ? });
? ? ? ? }
? ? ? ? //視頻開始播放（即解碼完成）執(zhí)行
? ? ? ? function startCallBack() {
? ? ? ? ? ? msgTxt.innerHTML = "Android mode:videoPlaying"
? ? ? ? ? ? canvas.style.display="block"
? ? ? ? }
? ? ? ? //視頻播放進度
? ? ? ? function playingCallBack(currentTime) {
? ? ? ? ? ? // console.log(currentTime)
? ? ? ? }
? ? ? ? //視頻播放完成執(zhí)行
? ? ? ? function endCallBack() {
? ? ? ? ? ? msgTxt.innerHTML = "Android mode:videoEnd"
? ? ? ? }
? ? </script>
</body>
</html>
項目中遇到的坑,把使用方法記錄一下
在線演示DOMO
https://github.com/xxfxx/android-video-autuplay? github地址,歡迎小星星~~~
