如何使用流媒體服務器在 HTML5 頁面播放視頻和直播？

隨着網絡提速和手機性能的提高，移動端頁面中出現視頻內容的頻率愈來愈高。HTML5 經過 video 標籤來支持嵌入式的媒體文件，使得開發者可以方便的將視頻文件嵌入頁面中。那麼本文咱們就來看一下如何在HTML5頁面播放視頻直播。

網頁視頻播放幾乎都會使用 video 標籤，video 標籤的經常使用屬性包括 src、width、height、controls、autoplay、preload、poster 等，關於這些標籤的屬性你們能夠自行查閱，本文主要講一下video 的視頻播放。

video 視頻播放主要有兩種狀況，內聯播放和全屏播放。

在 iOS 系統中，點擊播放視頻時，頁面會自動彈出一個系統默認原生全屏播放器來播放視頻。若是咱們但願視頻在頁面中內聯播放，而不是全屏播放，能夠經過添加參數 webkit-playsinline playsinline來控制（iOS10+ 支持）。

在 Android 系統中，視頻是默認內聯播放的。但在開發測試過程當中發現一些安卓機在視頻播放時，會將 video 的層級提到最高，擋住其餘遮罩在視頻區域上的元素，並且沒法經過設置 z-index 來改變層級。

目前 video 標籤在 HTML5 頁面中的應用已經愈來愈多，表現形式也愈來愈豐富，但在 iOS 和 Android 兩個不一樣系統下使用 video 標籤開發視頻播放功能時，不可避免的會遇到手機兼容性問題。

咱們已經研發出 iOS 和 Android 兩個不一樣系統的實時直播推流方案，能夠更簡單地操控監控攝像系統；節省了人力物力，減小了工做量， 提供更精確、更實時的錄像。

相信隨着系統和環境的不斷升級優化，必定會提出新的解決方案，作爲開發者，咱們須要不斷嘗試新方法、新參數，來找到視頻播放問題的最佳實踐。