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.
The values "true" and "false" are not allowed on boolean attributes
. mówić o zagmatwaniu.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>
źródło
video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }
Prostym rozwiązaniem jest - wystarczy zignorować interakcje użytkownika :-)
video { pointer-events: none; }
źródło
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; }
źródło
Ta metoda zadziałała w moim przypadku.
video=getElementsByTagName('video'); function removeControls(video){ video.removeAttribute('controls'); } window.onload=removeControls(video);
źródło
<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>
źródło
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); }
źródło