HTML5-Video // Steuerelemente vollständig ausblenden

84

Wie kann ich HTML5-Videosteuerelemente vollständig ausblenden?

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

false hat nicht funktioniert - wie geht das?

Prost.

html video Regenbogen Randolph
quelle

Antworten:

184

So was:

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

controlsist ein boolesches Attribut :

Hinweis: Die Werte "true" und "false" sind für boolesche Attribute nicht zulässig. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden.

Robertc
quelle
Technisch funktioniert das also; und ich denke, ist die Antwort. Obwohl; Durch Entfernen von "Steuerelementen" innerhalb des HTML5-Video-Markups wird das Video auf dem iPad beendet. Ich brauche also eine andere Lösung.
Regenbogen Randolph
1
@ 1977 Diese Frage ist wahrscheinlich relevant
Robertc
3
Sie könnten versuchen, das Tag einschließlich des Steuerattributs zu laden und es nach dem Laden der Seite mit etwas Javascript zu entfernen: var video = document.getElementById ('myvideo'); video.control = false;
user3072843
44
The values "true" and "false" are not allowed on boolean attributes. über verwirrend sprechen.
totalNotLizards
@jammypeach Die Attribute sind boolesch, weil sie zwei Zustände haben: sie existieren oder sie existieren nicht
robertc
42

Sie können Steuerelemente mit CSS-Pseudo-Selektoren wie Demo ausblenden: 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>
Erweitern Sie das Snippet

AbidCharlotte49er
quelle
Dies funktioniert gut für Chrome, aber nicht für Firefox. Haben Sie eine browserübergreifende Lösung?
TinyTiger
Müssen sie mit CSS oder JavaScript entfernen, weil ich etwas zusammen
hacke
Hey Benny für Mozilla. Sie müssen CSS mit dem Präfix des Herstellers für alle hinzufügen, z. B. "-moz-media-control-play-button". Danke
AbidCharlotte49er
1
Versucht, die Präfixe hinzuzufügen, aber es hat nicht funktioniert. Hier ist eine aktualisierte JSfiddle und hier ist das CSS, das ich verwendet habevideo::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }
TinyTiger
Benny, ich habe im Mozilla-Dokument eingecheckt, dass das vom Anbieter vorangestellte Pseudo-CSS nicht verfügbar ist. Sie können dies über JavaScript handhaben. Bitte beachten Sie mein Code-Snippet. über . Ich habe meine ursprüngliche Lösung bearbeitet. "Für Firefox müssen wir es in JavaScript behandeln" Danke Viel Glück
AbidCharlotte49er
35

Eine einfache Lösung ist - nur um Benutzerinteraktionen zu ignorieren :-)

video {
  pointer-events: none;
}
Jakob E.
quelle
4
Dies funktioniert mit der Ausnahme, dass die Steuerelemente beim ersten Laden angezeigt werden.
m4n0
6

Entfernen Sie zunächst das Attribut "Steuerelemente" des Videos.
Für iOS können wir die eingebaute Wiedergabetaste des Videos ausblenden, indem wir den folgenden CSS-Pseudo-Selektor hinzufügen:

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

Diese Methode hat in meinem Fall funktioniert.

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);
Richy Zuo
quelle
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
quelle
<! - Aus vollständigem Text <script src = 'media-player.js'> </ script> erstellen und in dasselbe Verzeichnis stellen ->
user6884687
0 
<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
quelle