web-dev-qa-db-fra.com

Masquer le bouton de lecture vidéo HTML5 pour iPhone

Je veux masquer le gros bouton de lecture qui apparaît par défaut sur l'élément <video>

C'est possible?

iphonehtml5
54
ilyo

Il semble que Apple a encore changé le shadow-dom.

Afin de masquer le contrôle du bouton de lecture, vous devez utiliser le CSS suivant:

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
63
Daemeron

Je n'ai aucun appareil iOS à tester, mais essayez peut-être ceci:

video::-webkit-media-controls {
    display:none !important;
}
106
Ian Devlin

Un coup d’oeil au DOM DOM de l’ombre dans Safari iOS m’indique que ce que vous voulez (cacher uniquement le gros bouton de lecture central) est:

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

La réponse de Ian cache tout, y compris les pistes de texte (sous-titres ...)

56
Arnaud Leyder

Dans le fichier source vidéo, vous pouvez simplement changer 

controls= "false"

Pour le CSS Safari, que le navigateur natif sur iOS, vous pouvez également essayer cette astuce de hacky

.custom-video-controls {
  z-index: 2147483647;
}

Voici un lien vers une discussion de détail sur la gestion/masquage des contrôles de la vidéo HTML 5

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

9
user3283997

Basé sur la réponse de Ian

video::-webkit-media-controls {
    opacity: 0;
}

Cela cachera tous les contrôles. Bon pour les vidéos d'arrière-plan qui ne seront pas lues automatiquement.

2
Chloe

Pour les applications Web . Fonctionne également sur iOS 10.3 iPhone7 et Safari 10.1. Merci aux contributeurs précédents. J'avais aussi le problème que l'élément ne contenait aucun attribut "control". 

'<style type="text/css">'+
    '*::-webkit-media-controls-panel {'+
     '   display: none!important;'+
      '  -webkit-appearance: none;'+
   ' }'+
    /* Old shadow dom for play button */
    '*::--webkit-media-controls-play-button {'+
        'display: none!important;'+
        '-webkit-appearance: none;'+
    '}'+
    /* New shadow dom for play button */
    /* This one works */
    '*::-webkit-media-controls-start-playback-button {'+
        'display: none!important;'+
       ' -webkit-appearance: none;'+
        '}'+
    +'</style>'
1
Zebra Pogo

Today @ 2017 in iOS 10 cela fonctionne:

.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}
1
BG Bruno

Essaye ça:

video {
    &::-webkit-media-controls {
        display:none !important;
    }

    &::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }
}
0
Arpit
video::-webkit-media-controls { display:none !important; }

N'a pas fonctionné pour moi sur iOS, mais

*::-webkit-media-controls-panel {
  display: none!important;
 -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

A travaillé parfaitement!

0
William Pei Yuan

Selon cette réponse , dans Google Chrome, nous pouvons cacher le gros bouton de lecture comme ceci:

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

Cela pourrait être utile si vous souhaitez le masquer sur Android ainsi que sur iOS.

0
joeytwiddle

Vous ne pouvez pas supprimer le bouton de lecture. Cet espace réservé pour la vidéo apparaît toujours comme l'indique le document: iPhone Video PlaceHolder . Mais peut-être pouvez-vous détecter que vous êtes sur un iphone et afficher une image avec un lien vers votre vidéo au lieu de son tag vidéo.

<a href="yourvideo.mp4"><img src="yourposter.png"/></a>

La vidéo sera lancée dans un lecteur comme une balise vidéo.

0
vincentp