| 導語 企鵝電競項目，直播和視頻播放是其中的核心。麵對著產品同學不斷的詢問：為什麼h5的體驗這麼差？為什麼不能和app的播放體驗保持一致？我們對著h5不明確的文檔和不同瀏覽器的怪異表現欲哭無淚。 經過一係列的調研爬坑，斬荊披棘，我們一步步提升了體驗，做到了和app基本一致的體驗。在摸索優化背後，我們也想把這些問題和解決方法總結下來，讓其他同學做到直播的時候可以自豪的說，這就是我們的h5直播體驗
1. 自動播放問題
通過autoplay屬性
視頻的自動播放需要在video標簽上添加autoplay屬性, 如：<video autoplay><video/>但是在很多瀏覽器裏，如iOS下並不支持這個屬性，在iOS下必須給webview設置
self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;才能讓這個屬性生效從而讓用戶一進入頁麵就開始視頻的自動播放
通過直接調用video.play()方法
在一些情況下我們想加入一些判斷邏輯，如判斷用戶網絡環境，在wifi下自動播放，在4g環境下給出提示，這中情況下就適合直接選中video並調用video.play來播放視頻
但是這種情況下也需要webview的支持，如在手Q下可以做到直接調用，在微信下因為不允許視頻直接播放，則必須通過用戶的真實操作來觸發調用video.play(),這就是各種微信的h5活動頁麵需要引導用戶進行一下點擊操作才開始的原因。
同時發現真實點擊必須使用觸發 touchend、click、doubleclick 或 keydown 事件等標準的事件才能觸發，使用Zepto封裝過的tap事件並不能觸發播放器的播放
2. 頁麵內聯播放問題
在iOS Safari和一些安卓的一些瀏覽器下播放視頻的時候，不能在h5頁麵中播放視頻，係統會自動接管視頻
如果需要在h5頁麵內播放視頻，需要在視頻標簽上加上 webkit-playsinline，在iOS10以後，需要加上playsinline,建議同時加上這兩個屬性，同時需要app支持這種模式，手Q和微信都支持這種模式
//在html
没有评论:
发表评论