音頻視頻開發問題總結

移動端音頻、視頻自動播放

有別於 PC 端，移動端瀏覽器禁止音頻和視頻自動播放能力，而當前微信內置瀏覽器是支持自動播放的。

大部分安卓機給 <audio> 或 <video> 標籤設置 auto 屬性便可；而其它機型（特別是 IOS 系統），則須要在微信 jssdk 加載完畢並觸發 ready 事件後，利用 JS 直接調用音頻或視頻的 play 方法。

參考 直播視頻在微信內自動播放

如何禁止移動端 <video> 標籤播放視頻時自動全屏

參考視頻H5のVideo標籤在微信裏的坑和技巧

iOS

iOS 10 Safari 中，video 新增了 playsinline 屬性，可使視頻內聯播放。
iOS 10 以前的版本支持 webkit-playsinline

測試發現 iOS 10 以上版本使用 playsinline 達到預期效果，而 iOS 10 以前的版本使用 webkit-playsinline 的達不到預期效果。

推薦使用 iphone-inline-video 解決 iOS 中（包括 iOS 版微信）的兼容問題。

Android

Android 由於由太多廠商定製化，標準很不統一，基本把場景縮小到微信——即兼容QQ瀏覽器 X5 內核

• 【方案一】

當咱們在微信中播放來至騰訊視頻的時候，會發現它竟然不會被強制全屏，而其它來源的視頻都不能倖免。因此，咱們能夠經過把視頻資源上傳到騰訊視頻再使用。

可是，這個方案有個弊端——播放正片以前，會被強行插入廣告。若是不想影響用戶體驗，能夠購買騰訊視頻的上傳無廣告服務，適合有必定經濟實力的公司。

騰訊視頻VIP會員廣告屏蔽特權說明

若想經過騰訊視頻上傳無廣告的做品，屬於付費項目，付費標準：3000元/年，每一年能夠容許5萬視頻播放量，若是是5-10萬播放量，則年費是6000元，以此類推。若是您有興趣瞭解，請把項目需求發送至： v_open@tencent.com，會有專門工做人員主動聯繫您洽談具體事項，謝謝！

• 【方案二】 網上流傳這一種使用 canvas 實現播放的黑科技，算是一種折中方案，對於沒錢又追求完美的小公司能夠試試。
• 【方案三】 使用騰訊瀏覽器 H5 同層播放器

iPhone plus 神祕黑屏——只聞其聲，不見其人

設備信息

因爲是領導的手機，除了知道是 iPhone 7 plus 外沒有更多信息

問題重現

部分移動場景中，<video> 會由於層級過高，沒法被其它標籤覆蓋。最開始的解決的思路——在播放是顯示 <video> ，中止時隱藏並顯示封面圖，可是測試 Iphone7 plus 出現異常。

1. 第一次點擊播放時，彈窗播放，一切如常。
2. 而後點擊後退按鈕暫停播放，此時暫停事件被觸發，將 <video> 進行隱藏，顯示封面圖代替。
3. 第二次點擊播放時，彈窗播放，只聽到聲音，看不見圖像，一面黑漆漆的。
4. 重複 2，3 情況依舊。

定位問題

幾回調試發現，只要不隱藏 <video> 標籤問題就獲得解決。那麼，暫時時將 <video> 定位到視窗以外便可。

X5 啓用同層播放後，觸發輸入動做，致使部分安卓機型播放時黑屏

http://bbs.mb.qq.com/thread-1...

解決方案

目前來看，要麼不啓用同層播放，要麼不要有輸入操做