現(xiàn)在面臨一個問題chrome中播放后綴名為.mp4的視頻文件只有聲音播放不出視頻畫面磷斧，上網(wǎng)查了一下才知道贪婉，MP4視頻不是說后綴名以.mp4結(jié)尾的就是MP4視頻森缠，mp4視頻還包括不同的編碼格式鞋喇，還有不同的擴展名馏颂，都可以統(tǒng)一定義成MP4文件蛮艰，而chrome只支持標(biāo)準(zhǔn)的H.264方式的編碼贱鼻，所以如果視頻編碼格式不對喻奥，chrome還是加載不出來的。
想要查看視頻的編碼格式赖欣，最簡單查看視頻信息的方式是屑彻，在文件中選中視頻點擊右鍵查看簡介或者詳細(xì)信息，下面有一個欄信息是編解碼器：標(biāo)準(zhǔn)的編碼格式是H.264顶吮，如果不是這種格式社牲，那很抱歉chrome加載不出來是正常的。
為什么chrome只支持H264這種格式呢云矫，而不支持所有的視頻編碼格式膳沽？查了一下大概是說，絕大部分的視頻編碼格式都是要付專利費的让禀，Google已經(jīng)買了H264編碼格式，所以其他的就不買了陨界，F(xiàn)irefox沒有Google那么有錢不愿意買巡揍。不過它使用Flash，絕大部分的視頻格式基本上可以通過Flash播放菌瘪。
而我司解決辦法是腮敌，將MP4視頻文件轉(zhuǎn)碼統(tǒng)一轉(zhuǎn)成hls格式編碼的視頻阱当，這種格式的視頻后綴名是以.m3u8結(jié)尾的。
什么是HLS糜工？
HTTP Live Streaming（簡稱HLS）是一個基于HTTP的視頻流協(xié)議弊添，由蘋果公司實現(xiàn)，
HTTP流媒體直播(HLS)是一種基于HTTP的媒體流媒體通信協(xié)議捌木，由蘋果公司實施油坝，作為QuickTime、Safari刨裆、OS X和iOS軟件的一部分澈圈。它的工作原理是將整個流程分解成一個小的基于http的文件下載序列，每個下載都加載了一個完整的潛在無界傳輸流的一小塊帆啃。
什么m3u8
先說說M3U瞬女，M3U是一種播放多媒體列表的文件格式，它的設(shè)計初衷是為了播放音頻文件比如MP3,但是越來越多的軟件現(xiàn)在用來播放視頻文件列表努潘，M3U也是可以指定在線留媒體音頻源诽偷。很多播放器和軟件都支持M3U文件格式。
M3U8是Unicode版本的M3U疯坤，用UTF-8編碼渤刃。’M3U’和M3U8‘文件都是蘋果公司使用的HTTP Live Streaming格式的基礎(chǔ)贴膘，這種格式可以在iPhone和Macbook等設(shè)備播放卖子。
平臺支持情況
蘋果的產(chǎn)品都能很好的支持，iPhone刑峡、Safari洋闽，但是在chrome和Firefox還有一些其他未知的瀏覽器不支持播放這種視頻格式。
So突梦，想要播放這種格式的視頻诫舅，前端這塊還要做一層處理，不過不用擔(dān)心宫患，已經(jīng)有人幫我們造好輪子了刊懈，Github上有很好的庫可以支持這種視頻格式的播放，VideoJs,videojs-contrib-hls
集成起來也非常的簡單娃闲，github上都給了一些示例虚汛。
- 快速集成開發(fā)
在head頭中引入如下的CDN，需要引入videojs的樣式皇帮，是為了使用播放器的樣式卷哩，要不然播放器會很難看。
<link rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js"></script>
<body>
<video id="video-play" class="video-js vjs-default-skin"
style="width: 600px; height: 400px;"
playsinline webkit-playsinline
controls preload="auto"
x-webkit-airplay="true" controlsList="nodownload" oncontextmenu="return false">
<source src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8" type="application/x-mpegURL">
</video>
<button>播放</button>
</body>
<script>
var el = document.getElementById("play-btn")
el.addEventListener('click', function () {
window.videojs('video-play', {}, function onPlayerReady () {
this.play()
this.on('ended', function () {
console.log('ended, video js')
})
})
})
</script>
擴展：
- MP4視頻編碼格式有哪幾種
MP4視頻格式包括：MPEG-4 SP(Simple Profile/簡單類)/ASP(Advanced Simple Profile/高級簡單類)：xvid, divx5, 3ivx,ffmpeg/ffdshow, NeroDigital ASP...及MPEG-4 AVC/H.264：x264, NeroDigital AVC, Apple...還有MPEG-2, MPEG-1（不含Divx3/M$ MPEG4, WM9, RV9或VP6）.-
參考鏈接：
Mp4編碼全介紹：https://my.oschina.net/alphajay/blog/4276
http://www.reibang.com/p/52c569efbfc0
https://imququ.com/post/html5-live-player-1.html
