本篇文章給大家分享了關於如何自訂video播放器樣式，內容很詳細，希望可以幫助到大家。
本文基於HTML5 Video API，自訂Web影片播放器樣式。
其實吧，原生的video 標籤樣式挺好看的，但每個人的視覺感受不一樣，所以就會有需要改變原生樣式的時候。
那就給它化個妝咯。淡妝，淡妝。
<video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768022.cossh.myqcloud.com/hualv/437D2592787911E8862FD89EF30F789D.mp4"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow" // 使video支持ios的AirPlay功能，需要终端支持
x5-playsinline
poster="https://img02.sogoucdn.com/app/a/200692/42345752787911E8BB8FD89EF30F789D?m-wh=960*540"
></video>新增playsinline屬性：
webkit-playsinline="true" playsinline="true" x5-playsinline
這個playsinline屬性是讓video內斂到瀏覽器webview裡面，而不使用瀏覽器自己實作的video樣式，但是有的瀏覽器不認這個，就是強制要用自己的。例如UC，你要用的話就需要它來給你配置白名單。有的瀏覽器就是不支持，白名單都沒有。
關於騰訊的x5等瀏覽器的這些屬性可以看他們的文章【騰訊瀏覽服務-H5同層播放器接入規範】
$(selector).initVideoPlayer(); // select 为video元素
播放器樣式在git code專案的demo資料夾有單獨的css，可依需求改成自己喜歡的樣子，或是你產品經理喜歡的樣子。
相關推薦：
以上是如何自訂video播放器樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
