Wideo HTML5 // Całkowicie ukryj elementy sterujące

84

Jak mogę całkowicie ukryć elementy sterujące wideo HTML5?

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

false nie zadziałało - jak to się robi?

Twoje zdrowie.

html video

— Golden Richards
źródło

185

Lubię to:

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

controlsjest atrybutem logicznym :

Uwaga: wartości „true” i „false” nie są dozwolone w atrybutach logicznych. Aby przedstawić fałszywą wartość, atrybut musi zostać całkowicie pominięty.

— robertc
źródło

Więc technicznie to działa; i myślę, że jest odpowiedzią. Chociaż; usunięcie „elementów sterujących” w znaczniku wideo HTML5, zabija wideo na iPadzie; potrzebuję więc innego rozwiązania.

— Golden Richards

1

@ 1977 To pytanie jest prawdopodobnie istotne

— robertc

3

Możesz spróbować załadować tag wraz z atrybutem kontrolnym i usunąć go po załadowaniu strony za pomocą javascript: var video = document.getElementById ('myvideo'); video.control = false;

— user3072843

44

The values "true" and "false" are not allowed on boolean attributes. mówić o zagmatwaniu.

— totalNotLizards

@jammypeach Atrybuty są logiczna, ponieważ mają dwa stany: one istnieją, albo nie

— robertc

44

Możesz ukryć elementy sterujące za pomocą pseudoselektorów CSS, takich jak 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>

Rozwiń fragment

— AbidCharlotte49er
źródło

Działa to świetnie w przeglądarce Chrome, ale nie Firefox. Czy masz rozwiązanie obsługujące wiele przeglądarek?

— TinyTiger

Muszę je usunąć za pomocą CSS lub JavaScript, ponieważ

— hakuję

Hej Benny dla Mozilli. Musisz dodać css z prefiksem dostawcy dla wszystkich z nich, np. „-Moz-media-controls-play-button”. Dzięki

— AbidCharlotte49er

1

Próbowałem dodać prefiksy, ale to nie zadziałało. Oto zaktualizowany JSfiddle, a tutaj CSS, którego użyłem

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

— TinyTiger

Benny, sprawdziłem w dokumencie Mozilli, że pseudo CSS z prefiksem dostawcy nie jest dostępne. Możesz sobie z tym poradzić za pomocą JavaScript. Zobacz mój fragment kodu. powyżej . Edytowałem moje oryginalne rozwiązanie. „W przypadku przeglądarki Firefox musimy obsługiwać to w JavaScript”. Dzięki, powodzenia

— AbidCharlotte49er

36

Prostym rozwiązaniem jest - wystarczy zignorować interakcje użytkownika :-)

video {
  pointer-events: none;
}

— Jakob E.
źródło

4

Działa to z wyjątkiem tego, że kontrolki są wyświetlane podczas początkowego ładowania.

— m4n0

7

Przede wszystkim usuń atrybut „controls” filmu wideo.
W przypadku systemu iOS możemy ukryć przycisk odtwarzania filmu, dodając następujący pseudo selektor CSS:

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

— Alan
źródło

3

Ta metoda zadziałała w moim przypadku.

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

— Richy Zuo
źródło

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
źródło

Zgadzam się. Najprostszym rozwiązaniem jest nigdy nie umieszczanie atrybutu na początku.

— 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
źródło

<! - utwórz z całego tekstu <script src = 'media-player.js'> </script> i umieść w tym samym katalogu ->

— user6884687