[TOC] # 屬性 ~~~ video.error // null正常 video.error.code // 1用戶終止 2網絡錯誤 3解碼錯誤 4URL無效 video.currentTime // 當前播放的位置，賦值可改變位置 video.duration // 當前資源長度，流返回無限 video.paused // 是否暫停 video.ended // 是否結束 video.autoPlay // 是否自動播放 ~~~ <br> # 方法 ~~~ loadstart // 客戶端開始請求數據 error // 請求數據時遇到錯誤（可以通過上一頁的屬性video.error.code查看具體錯誤原因） play // 開始播放時觸發 pause // 暫停時觸發 loadeddata // 數據已加載 waiting // 等待數據，并非錯誤 playing // play觸發后執行一次 canplaythrough // 可以播放，已加載好 timeupdate // 播放時間改變 durationchange // 資源長度改變 ... ~~~ <br> # 兼容性 ## 自動播放 ? ? ? ?在ios上會自動全屏播放，需要在video標簽上設置一個屬性webkit-playsinline，ios10及以上版本屬性名改成playsinline。安卓上，無法自動播放，必須手動觸發視頻的播放。調用任何方法都沒用，據說這個為了幫用戶省流量而設定的。但是安卓在首次觸發之后，再次觸發可以通過調用.play來觸發播放視頻。因此做兼容的時候可以設一個判斷是否首次播放的標志來處理。 <br> ## 默認樣式 ? ? ? ?安卓下，不能自動播放，因此視頻在播放前會帶有視頻的默認白色加圓圈播放按鈕且背景是純黑色，可以說是非常丑陋了。為了好點的用戶體驗就是可以在視頻的最上層覆蓋一張引導用戶點擊播放視頻的引導圖，這樣既不丑陋又讓用戶知道這里需要點一下才有東西出現。我的做法是增加一個手指引導圖，然后讓改元素可穿透(即設置pointer-events:none;讓其不會成為任何鼠標事件的target)，這樣點擊元素的時候就相當于點擊了視頻播放。然后監聽playing事件，如果視頻開始播放了則把引導圖隱藏。具體如下： <br> ~~~ <div class="entry_video" id="entry_video"> <video class="entry_video_con" id="video" webkit-playsinline playsinline src="//wq.360buyimg.com/fd/h5/1707/entryvideo/images/meirenyu_7f7e46da.mp4" autoplay="true"></video> <div class="guide" style="width: 100%;height: 100%;top: 0;left:0;position: absolute;pointer-events:none;"> <img src="//img11.360buyimg.com/jdphoto/s750x1334_jfs/t5668/219/7883436652/42409/2a1e4cc0/5976a71bN212dfa7b.png" alt="" style="width:100%;height:100%;pointer-events:none;"> </div> </div> ~~~ ~~~ vi.addEventListener('playing',function(){ $('.guide').hide(); }) ~~~ <br> ## 全屏播放 ? ? ? ?若頁面中沒有其他內容，只是播放一個視頻的話，這個問題很好處理。設置webkit-playsinline，如果是在X5內核瀏覽器的話，設置x5-video-player-type="h5" x5-video-player-fullscreen="true"。那么問題來了，如果頁面上不只有視頻，還有其他內容呢，例如視頻是在一個彈出層中。這樣設置的話，頁面原有內容會有一個1s左右的非常明顯拉伸過程，這個拉伸過程就是為全屏播放視頻做準備的。但是這樣的體驗可以說是非常糟糕了。于是這種情況下，必須舍棄設置全屏播放了，但是在X5瀏覽器非全屏播放模式下，安卓會在視頻頁面右上角自動生成一個全屏按鈕，這個怎么都去不掉。若用戶點擊了進入全屏模式，視頻播放完畢并不會停留在視頻最后一幀，而是出現騰訊的一些視頻推送，你懂的。這個時候退出了全屏播放的話，視頻會自動隱藏，所以最好做一張視頻底圖，不然就尷尬了。 <br> ## x5下檢測全屏 ~~~ vi.addEventListener("x5videoenterfullscreen", function(){ //進入全屏 }); vi.addEventListener("x5videoexitfullscreen", function(){ //退出全屏 }); ~~~ ?? ? ? ?用video.addEventListener("x5videoexitfullscreen", function(){….});可以檢測到視頻什么時候退出了全屏，但是若在這個監聽到退出之后隱藏整個視頻，則再次觸發播放視頻事件失效。且在這個監聽中直接調用.play方法并不能使視頻重新播放。也就是說在檢測過程中不能對視頻進行一些隱藏，刪除的操作。可以說，這檢測也沒什么意義了。 ## 微信固定入口的一些奇特bug **①.必須要等到微信的jsbridge?ready了才能觸發.play，否則不會自動執行。** ~~~ document.addEventListener("WeixinJSBridgeReady", function() { $("#video")[0].play(); }); ~~~ **②在固定入口內，且jsbridge?ready了，如果使用搖一搖，也無法觸發.play。需要在搖一搖之前預先加載如下：** ~~~ document.addEventListener("WeixinJSBridgeReady", function() { var vi = document.getElementsByTagName('video')[0]; vi.load(); vi.pause(); window.addEventListener('devicemotion', deviceMotionHandler, false); }); ~~~ 　　這種情況，與第五點是相悖的，也就是說如果要在搖一搖之前預加載，就做不到頁面跳出之后返回可以重建video。也就是說，搖一搖播視頻一定存在跳出頁面再返回的時候，video變得詭異，播放不正常的問題。目前，這個bug我還沒有辦法解決。 **③微信固定入口在沒有使用jsbridge，而是通過點擊來播放的點擊事件，只能是click事情，不能是touchstart事件。** # 參考資料 [走進安卓的重災區----video](https://www.cnblogs.com/LuckyWinty/p/7234937.html)