Video HTML5 // Nascondi completamente i controlli

85

Come posso nascondere completamente i controlli video HTML5?

<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

false non ha funzionato: come si fa?

Saluti.

html video

— fred randall
fonte

187

Come questo:

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controlsè un attributo booleano :

Nota: i valori "true" e "false" non sono consentiti negli attributi booleani. Per rappresentare un valore falso, l'attributo deve essere omesso del tutto.

— robertc
fonte

Quindi tecnicamente funziona; e credo che sia la risposta. Anche se; la rimozione di "Controlli" all'interno del markup video HTML5, uccide il video su iPad; quindi ho bisogno di un'altra soluzione.

— fred randall

1

@ 1977 Questa domanda è probabilmente rilevante

— robertc

3

Potresti provare a caricare il tag compreso l'attributo control e rimuoverlo dopo il caricamento della pagina con un po 'di javascript: var video = document.getElementById (' myvideo '); video.control = false;

— user3072843

44

The values "true" and "false" are not allowed on boolean attributes. parlare di confusione.

— totalNotLizards

@jammypeach Gli attributi sono booleani perché hanno due stati: esistono o no

— robertc

47

Puoi nascondere i controlli usando gli pseudo selettori CSS come Demo: https://jsfiddle.net/g1rsasa3

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

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

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Espandi lo snippet

— AbidCharlotte49er
fonte

Funziona alla grande per Chrome ma non per Firefox. Hai una soluzione cross-browser?

— TinyTiger

È necessario rimuoverli con CSS o JavaScript perché sto hackerando qualcosa insieme e non posso modificare direttamente il codice del tag video

— TinyTiger

Ehi Benny per Mozilla. Devi aggiungere CSS con prefisso del fornitore per tutti loro come "-moz-media-controls-play-button". Grazie

— AbidCharlotte49er

1

Ho provato ad aggiungere i prefissi ma non ha funzionato. Ecco un JSfiddle aggiornato ed ecco il CSS che ho usato

video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls {   display: none !important; }

— TinyTiger,

1

È possibile mostrare / nascondere dinamicamente uno qualsiasi di questi controlli individuali. Ad esempio: applica css video :: - webkit-media-controls-current-time-display {display: none;} inizialmente per nascondere il controllo del tempo corrente ma quando il video viene riprodotto, mostra il controllo del tempo corrente aggiornando la classe css video :: - webkit-media-controls-current-time-display {/ * display: none; * /}. Oppure applica una classe CSS diversa che mostra l'ora corrente. Grazie.

— user4848830

37

Una soluzione semplice è semplicemente ignorare le interazioni dell'utente :-)

video {
  pointer-events: none;
}

— Jakob E
fonte

4

Funziona tranne per il fatto che i controlli vengono visualizzati al caricamento iniziale.

— m4n0

7

Prima di tutto, rimuovi l'attributo "controlli" del video.
Per iOS, potremmo nascondere il pulsante di riproduzione incorporato del video aggiungendo il seguente pseudo selettore CSS:

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

— Alan
fonte

3

Questo metodo ha funzionato nel mio caso.

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);

— Richy Zuo
fonte

1

<video width="320" height="240" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

— fahimeh ahmadi
fonte

Sono d'accordo. La soluzione più semplice è non mettere mai l'attributo per cominciare.

— PRMan

0

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);


function initialiseMediaPlayer() {

    mediaPlayer = document.getElementById('media-video');

    mediaPlayer.controls = false;

    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
        else changeButtonType(muteBtn, 'mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

— user6884687
fonte

<! - crea dal testo completo <script src = 'media-player.js'> </script> e mettilo nella stessa directory ->

— user6884687