將塊加載到html5視頻

在哪裏可以閱讀信息並查看將塊加載到html5視頻的示例？

場景：
1.用戶開始播放大型視頻。
2.應該下載10-20秒的視頻。
3.如果用戶首先觀看10秒，則應下載下一個10秒鐘。因此，如果用戶僅查看視頻的前9秒，則不會有負載。

如果我們使用這個場景，它將減少服務器負載（在某些情況下）。

例如：
嘗試在YouTube上觀看視頻。他們這樣工作。嘗試加載一半視頻（約3分鐘），並從頭開始觀看。視頻的其他部分只有在達到特殊點時纔會下載（在我的情況下，在下載點前約50秒）。

我無法在html5視頻中找到緩衝區的任何控件。此外，我無法在流行的基於html5的視頻播放器（如VideoJs，JPlayer）中找到任何緩衝控制。

有人知道該怎麼做嗎？將塊加載到html5視頻

來源

2015-09-25 Alexandr

爲什麼？從表面上看，這聽起來像是可能導致非常糟糕的用戶體驗的事情。 – sideshowbarker

我認爲這會減少服務器負載。也許我錯了。 – Alexandr

嘗試在YouTube上觀看視頻。他們這樣工作。嘗試加載一半視頻（約3分鐘），並從頭開始觀看。視頻的其他部分只有在達到特殊點時纔會下載（在我的情況下，在下載點前約50秒）。 – Alexandr

我無法在html5視頻中找到緩衝區的任何控件。

的HTMLMediaElement接口的.buffered property和TimeRanges object，你可以從該回來了，不給你了緩衝直接控制，但可以給你至少在用戶體驗的一些控制。對於使用這些簡單的情況下，這裏的一些示例代碼：

<!doctype html> 
<html> 
<head> 
    <title>JavaScript Progress Monitor</title> 
    <script type="text/javascript"> 
     function getPercentProg() { 
      var myVideo = document.getElementsByTagName('video')[0]; 
      var endBuf = myVideo.buffered.end(0); 
      var soFar = parseInt(((endBuf/myVideo.duration) * 100)); 
      document.getElementById("loadStatus").innerHTML = soFar + '%'; 
     } 
     function myAutoPlay() { 
      var myVideo = document.getElementsByTagName('video')[0]; 
      myVideo.play(); 
     } 
     function addMyListeners(){ 
      var myVideo = document.getElementsByTagName('video')[0]; 
      myVideo.addEventListener('progress', getPercentProg, false); 
      myVideo.addEventListener('canplaythrough', myAutoPlay, false); 
     } 
    </script> 
</head> 
<body onload="addMyListeners()"> 
    <div> 
     <video controls 
       src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v"> 
     </video> 
     <p id="loadStatus">MOVIE LOADING...</p> 
    </div> 
</body> 
</html>

該代碼是從詳細Controlling Media with JavaScript引導了在Safari開發者網站。在MDN上還有另一個很好的Media buffering, seeking, and time ranges方法。

如果你真的想在緩衝更直接的控制，你需要做服務器端的一些工作，並使用MediaSource和SourceBuffer接口。

Appending .webm video chunks using the Media Source API是一個很好的演示;代碼片段：

var ms = new MediaSource(); 
var video = document.querySelector('video'); 
video.src = window.URL.createObjectURL(ms); 
ms.addEventListener('sourceopen', function(e) { 
    ... 
    var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 
    sourceBuffer.appendBuffer(oneVideoWebMChunk); 
    .... 
}, false);

來源

2015-09-25 22:32:45 sideshowbarker

將塊加載到html5視頻

回答

相關問題