摘要：參考鏈接禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互，設(shè)置層級(jí)，無(wú)控制條，非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見的坑處理在微信和瀏覽器中不全屏播放解決

某一天接了個(gè)需求，需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻，我開開心心做完，準(zhǔn)備交付的時(shí)候，問(wèn)題來(lái)了，PM想要用戶一進(jìn)入頁(yè)面，視頻就開始播放，不需要用戶手動(dòng)點(diǎn)擊。

“視頻自動(dòng)播放”這個(gè)需求是ok的，那我就在video標(biāo)簽上加個(gè)autoplay屬性嘛，在PC端瀏覽器里面試了一下，運(yùn)行流暢，沒有遇到什么問(wèn)題，但是放在手機(jī)瀏覽器里面打開，就跟沒設(shè)置autoplay是一樣的。

那不行的話，我在頁(yè)面加載完成的時(shí)候，監(jiān)聽video的canplay，然后執(zhí)行play()，應(yīng)該可以運(yùn)行了吧？然而放到手機(jī)里一看，還是不行。

var video = document.querySelector("#video");
video.addEventListener("canplay", function () {
   video.play();
})

問(wèn)題來(lái)了，加autoplay不行，可以理解，可能手機(jī)瀏覽器不支持這個(gè)屬性吧，但是我監(jiān)聽視頻加載完成，手動(dòng)去play()，這是程序常規(guī)方法，為什么也不行？
我嘗試在監(jiān)聽回調(diào)里面加了個(gè)alert,發(fā)現(xiàn)沒有彈出框。
所以我很長(zhǎng)一段時(shí)間認(rèn)為，手機(jī)瀏覽器無(wú)法自動(dòng)播放視頻，是因?yàn)閮?nèi)存大小的限制，導(dǎo)致無(wú)法監(jiān)聽video的加載完成。

昨天在segment上游蕩，發(fā)現(xiàn)了原來(lái)現(xiàn)在的手機(jī)瀏覽器是不允許網(wǎng)頁(yè)中視頻自動(dòng)播放的，只有與用戶進(jìn)行了一次交互動(dòng)作，才可以播放視頻。（音頻同理，這里就不重復(fù)提）
我嘗試了一下，在頁(yè)面上加一個(gè)彈框，用戶點(diǎn)擊了彈框之后(相當(dāng)于一次交互完成)，開始播放視頻，發(fā)現(xiàn)是可以播放的，部分代碼如下。

  
  
  
  




  


  

    
頁(yè)面內(nèi)有自動(dòng)播放視頻 請(qǐng)注意流量
    我知道了
  

所以解決視頻自動(dòng)播放的一般做法是，在頁(yè)面加載的時(shí)候彈框與用戶產(chǎn)生交互，然后才能開始自動(dòng)播放(如此看來(lái)，手機(jī)瀏覽器是真的很重視用戶的流量了。）

按照上面的方法，只要想要在手機(jī)端頁(yè)面中實(shí)現(xiàn) 進(jìn)入頁(yè)面，視頻立即自動(dòng)播放，就必須要借助一個(gè)額外的動(dòng)作去引導(dǎo)與用戶發(fā)生一次交互，那豈不是很丑，有沒有辦法是可以不借助彈框呢？答案是 有的。

jsmpeg是一款視頻解碼器，具體怎么用，可以百度相關(guān)文檔，實(shí)話說(shuō)我對(duì)此也不熟悉，第一次聽見的時(shí)候是聽說(shuō)jsmpeg可以實(shí)現(xiàn)網(wǎng)頁(yè)端的視頻直播功能，這一次用來(lái)解決視頻自動(dòng)播放的需求也是借鑒別人的想法。
關(guān)鍵代碼如下：（前提：項(xiàng)目中已經(jīng)引入了jsmpeg.min.js）

頁(yè)面加載完成的時(shí)候執(zhí)行下面的js代碼：
var canvas = document.querySelector("#canvas");
// 注意這里需要將video.mp4轉(zhuǎn)換成ts格式的文件 才能生效
var player = new JSMpeg.Player("video.ts", { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();

//  onUnlocked方法
function onUnlocked() {
    player.volume = 1;
}

這樣即使不跟用戶產(chǎn)生交互 視頻也能自動(dòng)播放了，
注意點(diǎn)
1.demo必須放在服務(wù)器上面跑才能正常加載ts文件，如果是在本地的話，不能直接拖進(jìn)瀏覽器運(yùn)行，需要起個(gè)本地服務(wù)器
2.ts文件編碼方式必須為MPEG編碼，考慮到現(xiàn)在先進(jìn)的ts編碼方式是H.264了，之前用H.264編碼的ts發(fā)現(xiàn)播放不了
存在的問(wèn)題
1.這樣播出的視頻是沒有聲音的
附參考鏈接：微信Android自動(dòng)播放視頻（可交互，設(shè)置層級(jí)，無(wú)控制條，非X5）ffmpeg,jsmpeg.js,.ts視頻

1.雖然最后不管通過(guò)什么方法，算是實(shí)現(xiàn)了視頻自動(dòng)播放的需求，但是在真正播放的示例中，你會(huì)發(fā)現(xiàn)，使用video標(biāo)簽的時(shí)候，雖然設(shè)置了視頻的寬高，但是不起作用，所以需要在video中使用下面的屬性

這樣就可以在固定區(qū)域播放視頻了。
2.借助方案1的思路，其實(shí)可以實(shí)現(xiàn)用戶上傳視頻時(shí)的預(yù)覽

3.將mp4轉(zhuǎn)換成jsmpeg可播放的ts文件的方法
mac os下安裝homebrew,之后使用brew install jsmpeg，運(yùn)行下面命令：ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts (其中in.mp4和out.ts填寫原視頻的路徑以及轉(zhuǎn)出ts的路徑)，親測(cè)有效

其實(shí)關(guān)于瀏覽器video的問(wèn)題困擾了我很久，昨日在segment上瀏覽到“chrome66 禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)audio的自動(dòng)播放嗎”這樣一個(gè)提問(wèn)的時(shí)候，進(jìn)去看到回答，突然想起video是不是也是一樣的情況，今天看了下，果然是類似的，解了很久的疑問(wèn)，所以勉勵(lì)自己一定要善于發(fā)現(xiàn)并舉一反三。
上面提到的不論是解決方案或者說(shuō)補(bǔ)充的，大概能解決一大半手機(jī)瀏覽器視頻相關(guān)的問(wèn)題，剩下的問(wèn)題有機(jī)會(huì)再補(bǔ)充。

參考鏈接：
chrome66 禁止自動(dòng)播放后，有什么比較好的方法實(shí)現(xiàn)audio的自動(dòng)播放嗎
微信Android自動(dòng)播放視頻（可交互，設(shè)置層級(jí)，無(wú)控制條，非X5）ffmpeg,jsmpeg.js,.ts視頻
mac osx 下 homebrew安裝
mac 系統(tǒng)安裝使用 ffmpeg
HTML5音視頻播放(Video,Audio)和常見的坑處理
video在微信和QQ瀏覽器中不全屏播放解決