web-dev-qa-db-fra.com

Comment masquer le bouton plein écran du tag vidéo en HTML5

Je dois masquer le bouton plein écran du tag vidéo en HTML5. Existe-t-il un moyen d'y parvenir?

Full screen button

Merci.

html5fullscreenhtml5-video
19
Arun

Je pense que vous pouvez accomplir cela en changeant le css pour le #document fragments, ce sont des spécifications DOM1 et prises en charge par tous les navigateurs, mais concernant le style, je ne suis pas sûr.

Solution spécifique simple webkit browser (chrome sur windows)

La solution suivante est webkit spécifique

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

Voici le violon pour cela.

Avertissement:

  1. Cela ne fonctionnera pas sur les navigateurs qui ont un moteur de rendu autre que webkit par exemple Firefox ou Internet Explorer, ou des versions obsolètes de Opera qui avait Blink/Presto.
  2. Cela peut ne pas fonctionner avec les implémentations des navigateurs webkit dans les systèmes d'exploitation autres que Windows, par exemple Safari sur macOS.

Mise à jour:

Après que plusieurs lecteurs se soient plaints que la solution susmentionnée ne fonctionnait pas pour certains navigateurs, je mets à jour la réponse.

Prendre en charge les implémentations spécifiques au fournisseur:

  • La solution ci-dessus est -webkit- spécifique au navigateur et testé en Chrome sous Windows.
  • L'implémentation du DOM fantôme n'a pas été normalisée et peut donc varier d'un fournisseur de navigateur à l'autre.
  • Aujourd'hui, presque tous les navigateurs disposent d'excellents outils de développement, mais certaines fonctionnalités sont intentionnellement verrouillées, mais peuvent être ouvertes avec un petit effort, par exemple, dans Firefox, la plupart de ces configurations sont accessibles dans le about:config page.
  • Il est conseillé aux développeurs de déverrouiller les fonctionnalités du DOM fantôme dans leur navigateur.
  • Ensuite, ils peuvent inspecter le <video> composant

Comment activer la sélection du DOM fantôme dans Chrome

  • Accédez à Chrome> Outils pour les développeurs> Paramètres (icône représentant une roue dentée)
  • Sous Elements recherchez Afficher l'option DOM de l'ombre de l'agent utilisateur
  • Cochez (cochez) la case
  • Vous pourrez inspecter le DOM fantôme sous-jacent
  • Observez leur style respectif
  • Vous remarquerez qu'ils sont similaires aux sélecteurs de pseudo-classe

Quelques conseils gratuits non sollicités pour Hiding the full screen button of the video tag in HTML5

  • Trouver la solution peut être aussi simple que d'écrire du CSS avec des pseudo sélecteurs de classe
  • Mais comme tous les autres CSS, cela pourrait nécessiter beaucoup d'essais-n-erreurs
  • Et vous pourriez subir beaucoup de frustration pour le faire fonctionner
  • Mais souvenez-vous toujours, ça vaut le coup.

De plus, comme @paulitto le suggère, les méthodes DOM peuvent être implémentées après avoir supprimé l'attribut controls de <video> élément. Reportez-vous ce tutoriel pour en savoir plus.

39
DDM

Vous avez juste besoin d'écrire ce code dans votre css:

video::-webkit-media-controls-fullscreen-button {
    display: none;
}

Et le bouton plein écran se cachera

4
GrazZ

Je pense que vous ne pouvez pas faire cela sans cacher tous les contrôles. Vous pouvez utiliser ses méthodes dom pour implémenter vos propres contrôles et les concevoir pour ressembler exactement aux contrôles intégrés

Ou vous pouvez également utiliser des plugins vidéo html5 externes pour implémenter cela

2
paulitto

Vous pouvez écrire votre code personnalisé pour les contrôles

par exemple. Pour changer la durée de la vidéo, utilisez le code ci-dessous

document.getElementsByTagName('video')[0].currentTime=10;

Le lien ci-dessous fournit tous les exemples nécessaires pour effectuer des contrôles manuels sur la vidéo avec javascript

Événements vidéo HTML5 et API

0
mujaffars