本文和大家分享的主要是強制Html5視頻全量加載相關內(nèi)容，一起來看看吧，希望對大家學習html5有所幫助。

　　默認情況下我們實現(xiàn)一個簡單的 H5 的播放器，只需要這么簡單的代碼就好：

　<video preload width="320" height="240" controls src="./static/videos/1.mp4"></video>

　　這個時候用戶點擊播放按鈕就可以開始播放了。

　　但是為了更好的用戶體驗，我們有的時候需要預加載視頻，比如有的視頻可能是在用戶產(chǎn)生某些交互進行顯示播放的。這個時候我們優(yōu)先想到的是 preload 屬性。

　　此屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。

　　None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。

　　Metadata：部分預加載。使用此屬性值，代表頁面制作者認為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時間等等）。

　　Auto：全部預加載。

但是我們查看視頻的請求，我們發(fā)現(xiàn)其實只預加載了一部分。它并沒有自動進行全部視頻內(nèi)容的下載，這樣的策略實際有利于節(jié)約用戶寬帶造成不必要的請求。

　　但是我們?nèi)绻仨氁獙崿F(xiàn)全量加載視頻呢？比如我們有的視頻只有30s，提前預加載可以更好的提升體驗，那我們是否有實現(xiàn)的方式？

　　使用 video 的一些事件

　　video 提供了 包括 play , pause , progress 等事件。當播放器處在不同的狀態(tài)時候進行觸發(fā)。其中 progress 會在視頻進行下載的時候進行觸發(fā)。

　　video.addEventListener("progress", function() {

　　// When buffer is 1 whole video is buffered

　　if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) === 1) {

　　// Entire video is downloaded

　　}

　　}, false);

　　通過 progress 事件我們可以確保我們的視頻都能夠緩沖完成。但是現(xiàn)代的瀏覽器都只會進行局部內(nèi)容的下載，因為瀏覽器認為這段內(nèi)容足夠完成成功播放。因此，我們可以通過播放視頻一會在暫停用于視頻緩沖的方式在后臺進行視頻加載。

　　使用 ajax and bloburl

　　其實我們可以使用 ajax 去進行資源的請求，如果響應的類型是 blob 的話，我們可以創(chuàng)建一個 object url 的。而此時這個 url 的生命周期取決于 document 創(chuàng)建開始。

　　const req = new XMLHttpRequest();

　　req.open('GET', './static/videos/1.mp4', true);

　　req.responseType = 'blob';

　　req.onload = function() {

　　// Onload is triggered even on 404

　　// so we need to check the status code

　　if (this.status === 200) {

　　const videoBlob = this.response;

　　const vid = URL.createObjectURL(videoBlob); // IE10+

　　// Video is now downloaded

　　// and we can set it as source on the video element

　　video.src = vid;

　　}

　　}

　　req.onerror = function() {

　　// Error

　　}

　　req.send();

　　這個時候我們可以看到一個xhr 的請求

　　使用 URL 我們需要考慮兼容性。

來源：jackpu