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

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 habe

video::-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