背景

h5的出現對多媒體在網頁上的視訊播放提供了支援，以前網頁播放視訊基本依賴於flash等外掛。而h5的video標籤實現了網頁播放視訊無外掛化。因此，h5的出現給網頁視訊播放帶來極大的便捷性，目前，PC端的Chrome，安卓端瀏覽器，微信瀏覽器，QQ瀏覽器(自帶播放器)，以及IOS的safari都支援h5的video標籤。部分PC端瀏覽器比如IE還不支援。

基礎知識普及

h5的video標籤目前支援三種視視訊封裝格式，有"video/mp4", "video/ogg", "video/mov"。mp4格式要求h264/aac。http點播時MIME TYPE即設定為"video/mp4"等格式，video標籤需要關聯視訊格式和視訊播放地址，瀏覽器請求到服務端的html檔案進行解析渲染，然後通過video標籤關聯的播放地址請求視訊播放流。

遇到的坑

最近點播專案中需要支援移動端的h5原生視訊播放，視訊格式為mp4。

(1)最初的實現遇到問題是通過VLC播放器能夠正常播放拖動(拖動的支援需要服務端返回206的http響應碼)，但是在PC的h5上(此時在PC的chrome測試，未在移動端測試)能播放但是不能拖動。下圖為h5正常拖動時的請求響應https包。

究其原因是https響應缺少上圖標註的欄位。

1.Accept-Ranges代表接收為位元組

2.Content-Length代表接收資料長度

3.Content-Range代表接收資料的範圍，332693504-504863243代表起始資料和結束資料的自己位置(包含332693504

(2)按照如上傳輸協議支援了PC和安卓的h5播放拖動。但是IOS端safari不能播放視訊。

經過對比測試發現。

之前的做法是，請求一個視訊連結，然後預設返回一整個視訊檔案，對於pc的h5拖動是預設請求偏移位置後的整個檔案(安卓端未知，但是能正常播放拖動)。此時服務端的做法預設為網頁請求的是整個檔案。

而對於safari來說，他不是一次性請求全部檔案的（不論osx還是ios），一般首先會請求0-1位元組，這個寫在request header的"range"欄位中:
range: 'bytes=0-1'

針對該問題，服務端修改Content-Range的起始和結束資料的位置值，即

Content-Range: bytes 0-1/504863244

另外需要返回兩個位元組的視訊資料，多了少了也不能播放。