怎么用h5實作移動端頁面的直播
uj5u.com熱心網友回復：
這邊看的話，video標簽是支持H.264的，采集那邊轉換為H.264就好了，這邊采集的話就不是很了解了，要呼叫手機攝像頭，音頻視頻處理轉換合成，應該有別人寫好的player，可以github上找找uj5u.com熱心網友回復：
人物介紹：產品同學：亮亮
測驗老大：春春
運維同學：原原
運營妹子：樂樂
前端：我
某日
亮亮：“嗨！我們做個html5的直播吧！運營做活動用！”
腦海里翻騰過無數種兼容處理解決方案以及功能上各種實作方式后，
我：“好呀！”
需求不算復雜：
報名參加一場線下活動,可在微信看直播,如果是直播時間之前打開觀看則是播放一則固定的片花
(省略各種需求評審，介面評審，互動評審...)
數日后
春春：“測驗環境測驗通過，各項功能正常，視頻播放正常！可發布生產！”
原原拿到春春的確認郵件，以迅雷不及掩耳之勢，排山倒海般的一頓敲擊：“發布完成了！”
半分鐘后
不知誰大叫一聲：“我草片花怎么這么卡！”
亮亮一臉懵逼的看著我，
春春一臉懵逼的看著我，
樂樂一臉懵逼的看著我，
我一臉懵逼的看著代碼...
“應該是生產服務器集團IT那里限制了視頻流的帶寬” 原原淡定的巡視著服務器一邊說道
樂樂：“我們把視頻放到優酷吧，反正就直播開始前用下，直播時都切到直播源了”
好的，說干就干！
晚上
春春：“測驗環境測驗通過，各項功能正常，視頻播放正常！可發布生產！”
原原拿到春春的確認郵件，以迅雷不及掩耳之勢，排山倒海般的一頓敲擊：“發布完成了！”
半分鐘后
不知誰在此大喊一聲：“我草，怎么頁面直接掛了！”
亮亮一臉懵逼的看著我，
春春一臉懵逼的看著我，
樂樂一臉懵逼的看著我，
我一臉懵逼的看著代碼...
Debug一通后，發現優酷默認的是http 的地址，剛好我們生產是https。so 瀏覽器安全機制攔截了
幸好優酷https地址也能跑，于是又嗖嗖嗖如飛流直下三千尺般瞬間處理好了這個緊急問題（其其實就是在http后面加了個s）
第三次提測
春春：“測驗環境測驗通過，各項功能正常，視頻播放正常！可發布生產！”
原原拿到春春的確認郵件，以迅雷不及掩耳之勢，排山倒海般的一頓敲擊：“發布完成了！”
嗯！這次沒有不知誰大喊一聲了
"咦?"
亮亮疑惑道:
"我們在自己APP內嵌了這個頁面,但是安卓app播放不了這個視頻啊!"
亮亮一臉懵逼的看著我，
春春一臉懵逼的看著我，
樂樂一臉懵逼的看著我，
我一臉懵逼的看著代碼...
經驗證：微信，iosAPP，PC，safari，都沒問題，唯獨AndroidAPP內嵌有問題
來不及找原因了，先換一個方案代替（事后，大概猜測是AndroidAPP的webView未開啟localStroage導致的）
于是我們聯系上了本次直播供應商，尋求將片花mp4放在他們服務器。并提供地址
合作很愉快的確定了，我們沒也很愉快的拿到地址，改代碼，提交給測驗
深夜
春春：“安卓APP中打不開片花，按鈕直接X掉了！”
緊急找原因：
安卓部分機型，webView中 video標簽播放m3u8的話，調不起來自帶的視頻播放組件
解決方案很簡單，APP端檢測到webView 的視頻播放，手動幫忙開啟自帶視頻播放組件
但是APP改動需要發版，需要提交審核。
so，
“我們將APP內視頻播放去掉，放一張圖片代替，讓他們分享到微信后觀看！”亮亮給出解決方案
于是我們又修改代碼，提交測驗。
第二天
春春：“測驗環境測驗通過，各項功能正常，視頻播放正常！可發布生產！”
原原拿到春春的確認郵件，以迅雷不及掩耳之勢，排山倒海般的一頓敲擊：“發布完成了！”
亮亮：“這次驗證沒問題了”
亮亮松了一口氣，
春春松了一口氣，
樂樂松了一口氣，
我松了一口氣
靜待周日正式直播
然而，事情總是沒有想象的那么美好！
直播當天
我：“IOS測驗直播流沒問題”
亮亮哭喪著臉在群里說：“安卓直播流一直加載0%，能否查下原因？”
亮亮一臉懵逼的看著我，
春春一臉懵逼的看著我，
樂樂一臉懵逼的看著我，
我一臉懵逼的看著代碼 哦不，看著群里。。。。
于是我以迅雷不及掩耳之勢奔回公司
Debug，不斷的查原因...
原來，
直播供應商的直播流，雖然支持https，但是是個假證書，被微信攔截了！
。。。
所以這個需求總計發版5次，修改5*N次，最后的最后還是在直播的時間并沒有完美的運行下去（安卓機型的客戶沒能觀看直播）
以上就是一次直播需求的踩坑經歷
總結如下：
1.安卓對m3u8的支持不是很好，特別是普通的webView中
2.使用第三方的代碼或者html標簽，請確保webView兼容性，比如說該開的功能是否全開
3.和直播供應商溝通，并確保包括https的支持是否100%完善
4.打死你都不要做直播需求！打死你都不要做直播需求！打死你都不要做直播需求！ 重要的事情說三遍！
uj5u.com熱心網友回復：
是個狠人..轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/95527.html
標籤：HTML5
下一篇：Axios