How to customize video player style?

This article shares with you how to customize the video player style. The content is very detailed. I hope it can help you.

DIY

This article is based on the HTML5 Video API and customizes the Web video player style.

Actually, the native video tag style is quite nice, but everyone’s visual experience is different, so there will be times when it is necessary to change the native style.

Then put some makeup on it. Light makeup, light makeup.

【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>

Add playsinline attribute:

webkit-playsinline="true"
playsinline="true"
x5-playsinline

This playsinline attribute allows the video to be integrated into the browser webview without using The video style implemented by the browser itself, but some browsers do not recognize this and are forced to use their own. For example, if you want to use UC, you need it to configure a whitelist for you. Some browsers just don't support it and don't even have a whitelist.

Regarding these attributes of Tencent’s x5 and other browsers, you can read their article [Tencent Browsing Service-H5 Same Layer Player Access Specification]

Use

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

Play The tool style has a separate css in the demo folder of the git code project. You can change it to what you like, or what your product manager likes, as needed.

Related recommendations:

vue-video-playerMake a custom player

vue-video-player Detailed explanation of the steps to customize the player

#

The above is the detailed content of How to customize video player style?. For more information, please follow other related articles on the PHP Chinese website!