Comment personnaliser le style du lecteur vidéo ?

Cet article explique avec vous comment personnaliser le style du lecteur vidéo. Le contenu est très détaillé. J'espère qu'il pourra vous aider.

Bricolage

Cet article est basé sur l'API vidéo HTML5 pour personnaliser le style du lecteur vidéo Web.

En fait, le style de balise vidéo natif est plutôt sympa, mais l'expérience visuelle de chacun est différente, il y aura donc des moments où il sera nécessaire de changer le style natif.

Ensuite, maquillez-le. Maquillage léger, maquillage léger.

【codez ici】

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

Ajoutez l'attribut Playsinline :

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

Cet attribut Playsinline rend la vidéo en ligne dans la vue Web du navigateur, au lieu d'utiliser le style vidéo mis en œuvre par le navigateur lui-même, mais certains navigateurs ne le reconnaissent pas et sont obligés d'utiliser le leur. Par exemple, si vous souhaitez utiliser UC, vous en avez besoin pour configurer une liste blanche pour vous. Certains navigateurs ne le prennent tout simplement pas en charge et n'ont même pas de liste blanche.

Pour plus d'informations sur ces attributs du x5 de Tencent et d'autres navigateurs, vous pouvez lire leur article [Tencent Browsing Service-H5 Same Layer Player Access Spécification]

Utilisation

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

Le style du lecteur a un CSS séparé dans le dossier de démonstration du projet de code git. Vous pouvez le modifier selon vos préférences ou selon ce que votre chef de produit aime, selon vos besoins.

Recommandations associées :

vue-video-player Créer un lecteur personnalisé

vue-video-player Explication détaillée de les étapes pour personnaliser le lecteur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!