H5 video 開發問題及相關知識點

時間 2019-11-30

標籤 h5 video 開發問題相關知識简体版

原文原文鏈接

♢ video點播與直播

H5 video目前全部瀏覽器都支持的視頻格式是MP4格式，因此mp4應當是點播web視頻的首選格式。

而在直播視頻上，H5 video只在移動端原生支持HLS流的直播視頻(Mac safari video標籤也支持， PC Chrome不支持)，其餘直播流（如FLV）就須要Flash插件的支持。html

♢ video與206狀態碼

video播放mp4時，發的依然是get請求，但http返回206狀態碼，即 partial Content。有關206狀態碼的相關內容，能夠參考下文

Http協議206狀態碼

♢ 終止視頻下載

video.pause() 能夠暫停視頻播放，但並不能中止視頻資源的繼續加載，媒體元素會繼續加載知道被垃圾回收機制回收。

要在暫停播放後當即中止，可以使用如下方法

video.pause()
video.src=''
video.removeAttribute('src');複製代碼

♢ 防止iOS上默認全屏播放

ios10及之後的版本，能夠經過給video標籤加playsinline屬性防止iOS默認全屏播放，ios9以前加 webkit-playsinline屬性，若是要兼容，則把兩個屬性都加上。

經過客戶端添加配置 UIwebview: webview.allowsInlineMediaPlayback = YES，不過仍是要求在video元素上加playsinline屬性

參考：

♢ 自動播放及播放控制

在移動端，有些瀏覽器支持添加autoplay屬性後自動播放，有些設置 autoplay 和 muted屬性也能自動播放，好比IOS 10+、Chrome。

若是想控制何時播放，且並非用戶觸發的（如沒有設置controls），那就設置muted屬性，而後調用video.play()方法，隔300ms左右有後，再經過video.muted = false打開聲音。

vide.muted = true;
video.play()
setTimeout(function () {
    video.muted = false
}, 300)複製代碼

iOS9及以前的版本要求有用戶交互才能播放，即手動點擊播放按鈕或者有用戶觸發的click、touchend、鍵盤等事件，而後調用video.play() 方法播放。在iOS9以前，iOS Native能夠經過 UIWebView的mediaPlaybackRequiresUserAction屬性來控制是否須要用戶交互。

使用element.click()觸發的click事件是否能夠被人爲是用戶行爲？不能

瀏覽器是如何知道是不是用戶觸發的事件？Event對象的只讀屬性isTrusted

<div id="test-ele">這個元素監聽事件</div>
<script>
    const testEle = document.querySelector('#test-ele');
    testEle.addEventlistener('click', function (evt) {
        // 用戶觸發爲true，script或EventTarget.dispatchEvent() 觸發爲false
        console.log(evt.isTrusted);
    }, false);
    testEle.click() // 這個觸發，evt.isTrusted = false
</script>複製代碼

有關iOS 10對safari video的放鬆策略能夠參考： New <video> Policies for iOS

♢ video.play() 的Promise對象（可用於捕獲視頻播放錯誤）

在Chrome上，若是沒有設置video.muted屬性，在非用戶行爲下，直接使用video.play() 播放，會收到 Uncaught (in promise) DOMException 的報錯，視頻也沒有播放。在iOS下面，可能不會有任何報錯，視頻也沒播放，這樣就沒法定位問題。

video.play() 會返回一個Promise對象，若是播放失敗，能夠經過返回的Promise catch到相關錯誤信息。

const pro = video.play();
if (pro) {  // iOS9及如下版本不會返回Promise對象，作下兼容處理
   pro.catch(err=>{ console.log(err) });   
}複製代碼

♢ TimeRanges 對象

在開始獲取played屬性的時候，覺得會返回一個已經播放的時長，實際上返回的是TimeRanges對象，並且看到TimeRanges的length一直不變，當時一臉摸不着頭腦，不知道有什麼用。後來在作進度控制，須要知道視頻已緩衝多少時，才弄明白。

video DOM對象有三個屬性會返回TimeRanges對象，分別爲 video.played/ video.buffered/ video.seekable

視頻開始時只有一個播放時間段，若是不進行跳躍觀看，就一直只有一個時間段，即 TimeRanges.length 值爲1；若是進行了跳躍觀看（如從2分鐘，忽然跳進到15分鐘的位置），而跳躍內容並無緩衝完畢，則會出現兩個時間段，這時TimeRanges的length爲2。因此TimeRanges個數會隨着跳躍觀看未緩衝完成的內容而增長，隨着緩衝的完成而減小，最少爲1個，即從開頭到結尾。

------------------------------------------------------

|=============| |===========| |

------------------------------------------------------

0 5 15 19 21

TimeRanges對象有一個length屬性和 start()、 play()兩個方法：

TimeRanges: length: 1 // 表明當前播放視頻存在的播放段 play(index) // 獲取指定播放段的播放（緩衝）開始時間，index從0開始取，以秒計 end(index) // 獲取指定播放段的播放（緩衝）結束時間

要獲取第一段的開始時間，使用 TimeRanges.start(0)，結束時間爲 TimeRanges.end(0)，第二段 TimeRanges.start(1)，以此類推

參考：