隨着網絡提速和手機性能的提升，移動端頁面中出現視頻內容的頻率越來越高。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 兩個不同系統的實時直播推流方案，可以更簡單地操控監控攝像系統；節省了人力物力，減少了工作量， 提供更精確、更實時的錄像。
相信隨着系統和環境的不斷升級優化，一定會提出新的解決方案，做為開發者，我們需要不斷嘗試新方法、新參數，來找到視頻播放問題的最佳實踐。
