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技術處理比較簡單,代碼