移動端視頻適配

移動端視頻適配

---

gitHub地址

插件實現的功能

• 解決播放視頻時不一樣設備的卡頓問題
• 同層播放器功能
• 非全屏播放，可操做菜單欄
• 安卓蘋果可自動播放視頻

背景：

• 默認狀況下使用同層播放器時，安卓會全屏播放（頁面通常不流暢，體驗很差），而IOS不會全屏播放。
• 微信瀏覽器安卓沒法自動播放視頻

---

如何使用：

<script src="./lib/jsmpeg.min.js"></script>
<script src="./lib/video.js"></script>
<script>
   window.onload = function () {
        window.videoName = new Video("./lib/index.mp4",{});
        var videoBox = document.getElementById("videoBox")
        videoBox.append(videoName.domElement)
        document.getElementById("btnPlay").addEventListener("click", function () {
            videoName.play();
            videoBox.style.display = "block";
        }, false)
    }
</script>

須要提供2個視頻文件，分別爲.mp4和.ts。（使用ffmpeg轉換（下文提供教程）或是讓設計師提供 ） 2個文件放在同個目錄下，傳入視頻路徑時，只需傳入.mp4的路徑，如上實例。

---

詳解：

安卓機採用jsmpeg建立視頻，在文檔中插入canvas標籤；IOS使用原生方法建立視頻，在文檔中插入video標籤；所以下方提供了集成的方法，安卓機和IOS機能夠同時調用。若是提供的集成方法不能知足需求，安卓機須要查閱jsmpeg，IOS能夠使用原生方法。

var videoName = new Video("index.mp4",option)

• 配置參數option: { totalTime: number//視頻總時長，必須，不然安卓機監聽結束事件 loop:boolean,//是否循環.默認爲false，可選 autoplay:boolean,//是否自動播放，默認爲false，可選 id:string,//視頻節點的id選擇器 }
• videoName.domElement //dom節點，用於插入到文檔中
• videoName.video //video對象，ios可直接使用原生對象的屬性和方法；安卓機使用了jsmpeg的屬性和方法，須要參閱https://github.com/phoboslab/jsmpeg 。

---

集成的方法：

方法名	做用
load	重載視頻
play	播放視頻
pause	暫停視頻
stop	中止視頻
destroy	銷燬視頻
getMuted	獲取音量
setMuted	設置音量
getCurrentTime	獲取當前播放位置
setCurrentTime	設置當前播放位置
getPlayStatus	獲取播放狀態
addEventListener	增長監聽事件，接受一個事件名和回調做爲參數
removeEventListener	銷燬監聽事件

---

TIP：

• 問題：視頻沒法自動播放 解決方法：若是視頻播放方法是在異步回調裏面調用，則必須在異步開始前調用videoName.load()方法；