HTML5 Video播放服務端大文件


HTML5 Video

Video是html5添加的新元素,用於視頻的播放,使用也特別簡單

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的瀏覽器不支持Video標簽。
</video>

注意簡單的Demo直接Copy使用可能會出現問題的,果然當movie.mp4文件過大時,會將整個文件下載下來才播放。

需求

如果視頻文件太大,對Video要求:

  • 邊播放,邊下載
  • 可以指定位置播放

Http 部分請求

要滿足上面的需求,首先想到Http部分請求,Http請求協議中對部分內容請求要求:

  • Http部分內容請求頭部需要指定:Range:bytes=0-
  • Http響應需要指定響應頭:content-range:bytes:0-、httpcode為206

讓客戶端和服務端遵循Http部分內容請求要求

客戶端即使Video元素(剛開始自己還卡在這里,怎樣才能控制Video發送部分請求),但其實Video默認為部分內容請求,也隨着播放繼續加載后面的視頻(想想也是如果不支持也太麻煩了)
注意 video的請求為Range:bytes=startIndex-,Range的結束位置沒有設定,這樣請求的范圍為startIndex到文件最后。但我們可以在服務端指定每次請求返回數據的大小,單位為bytes.

服務端

服務端讀取請求頭Range查看是否是部分請求,如果是則需要:

  • 讀取相應大小的流文件,作為響應體
  • 設置響應頭,如Content-Range: bytes 2293762-3342338/145108958最后的為文件的總大小
  • 設置響應返回碼 206

我用的是asp.net web api技術處理比較簡單,代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM