Maison > interface Web > Tutoriel H5 > le corps du texte

Comment personnaliser le style du lecteur vidéo ?

不言
Libérer: 2018-09-13 11:32:59
original
7522 Les gens l'ont consulté

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>
Copier après la connexion

Ajoutez l'attribut Playsinline :

webkit-playsinline="true"
playsinline="true"
x5-playsinline
Copier après la connexion

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元素
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal