如何自訂video播放器樣式？

本篇文章給大家分享了關於如何自訂video播放器樣式，內容很詳細，希望可以幫助到大家。

DIY

本文基於HTML5 Video API，自訂Web影片播放器樣式。

其實吧，原生的video 標籤樣式挺好看的，但每個人的視覺感受不一樣，所以就會有需要改變原生樣式的時候。

那就給它化個妝咯。淡妝，淡妝。

【code here】

<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同層播放器接入規範】

Use

$(selector).initVideoPlayer();  // select 为video元素

播放器樣式在git code專案的demo資料夾有單獨的css，可依需求改成自己喜歡的樣子，或是你產品經理喜歡的樣子。

相關推薦：

vue-video-player做出一個自訂播放器

vue-video-player自訂播放器步驟詳解

#

以上是如何自訂video播放器樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！