背景 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和504863243)，/504863244代表文件的總大小。必須嚴格按照此格式，數據錯一點就不能播放。 (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 另外需要返回兩個字節的視頻數據，多了少了也不能播放。 為什么safari行為不一樣： safari之所以分多次請求也有深層次原因。比方說先請求0-1字節（其實是2個字節），返回的時候數據并不多，但是可以通過分析"Content-Range"來獲取文件總長度。然后分段請求，比如請求第一幀來渲染thumb nail等等。這樣做有個好處就是，只有當用戶點擊播放了才請求完整文件，對于PC還好，對于手機這類數據傳輸需要收費的設備來說，必須要節省流量。 另外在iphone上chrome也用的是apple提供的內核，導致他們的行為基本上一致。（這是蘋果的規定）。 (3)在解決了上述兩個坑后，實際發現IOS還是不能播放，抓包現象為IOS只發出第一個請求收到服務端帶Content-Length字段響應后無后續請求發出。通過分析發現，IOS的safari播放mp4時第一個請求為不帶range(表示請求偏移)字段的請求，之前由于服務端nginx lua只過濾帶range字段請求響應修改返回206狀態碼，因此第一個包返回IOS的是200狀態碼。因此，IOS收到第一個響應后無后續請求發出。通過修改為206后正常播放。