Vídeo do HTML5 / / esconder por completo Os controlos
Como pude esconder completamente os controlos de vídeo HTML5?
<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
O falso não funcionou . como se faz isto?
Saúde.
57
6 answers
Assim:
<video width="300" height="200" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
controls
é um atributo booleano :
Nota: Os valores "true " e" false " não são permitidos em booleano atributo. Para representar um valor falso, o atributo tem de ser completamente omitido.
142
Author: robertc, 2017-10-20 15:13:31
Pode esconder os controlos usando Pseudo-selectores CSS como 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>
25
Author: AbidCharlotte49er, 2017-06-21 19:53:31
Uma solução simples é-apenas para ignorar as interacções do utilizador: -)
video {
pointer-events: none;
}
9
Author: Jakob E, 2018-01-18 13:38:41
Em primeiro lugar, remova o atributo "controls" do vídeo.
Para os iOS, poderíamos esconder o botão de reprodução do buildin do vídeo adicionando o seguinte pseudo selector CSS:
video::-webkit-media-controls-start-playback-button {
display: none;
}
4
Author: Alan, 2017-06-20 03:41:48
Este método funcionou no meu caso.
video=getElementsByTagName('video');
function removeControls(video){
video.removeAttribute('controls');
}
window.onload=removeControls(video);
1
Author: Richy Zuo, 2017-03-17 13:58:08
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
Author: user6884687, 2016-09-26 21:59:08