web-dev-qa-db-fra.com

Vidéo HTML5 // Masquer complètement les contrôles

Comment masquer complètement les contrôles vidéo HTML5?

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

false n'a pas fonctionné - comment cela se fait-il?

À votre santé.

html5video
64
No-Spex

Comme ça:

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

controls est un attribut booléen :

Remarque: Les valeurs "true" et "false" ne sont pas autorisées sur les booléens les attributs. Pour représenter une valeur fausse, l'attribut doit être omis complètement.

152
robertc

Vous pouvez masquer des contrôles à l'aide de pseudo-sélecteurs CSS tels que 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>

31
AbidCharlotte49er

Une solution simple consiste à ignorer les interactions utilisateur :-)

video {
  pointer-events: none;
}
14
Jakob E

Tout d'abord, supprimez l'attribut "contrôles" de la vidéo.
Pour iOS, nous pourrions masquer le bouton de lecture de la vidéo de la vidéo en ajoutant le pseudo sélecteur CSS suivant:

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

Cette méthode a fonctionné dans mon cas.

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);
1
Richy Zuo
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); 
}
0
user6884687