HTML5video//完全隐藏控件
如何完全隐藏HTML5video控件？
<video width="300" height="200" controls="false" autoplay="autoplay"> <source src="video/supercoolvideo.mp4" type="video/mp4" /> </video> 假没有工作 – 这是怎么做的？
干杯。
喜欢这个：
<video width="300" height="200" autoplay="autoplay"> <source src="video/supercoolvideo.mp4" type="video/mp4" /> </video>
controls是一个布尔属性 ：
注意：布尔属性不允许使用“true”和“false”值。 为了表示一个错误的值，该属性必须被完全省略。
您可以使用CSS伪select器来隐藏控件，如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>
首先，删除video的“控件”属性。
对于iOS，我们可以通过添加以下CSS伪select器来隐藏video的内置播放button：
video::-webkit-media-controls-start-playback-button { display: none; }
一个简单的解决scheme就是忽略用户交互:-)
video { pointer-events: none; }
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); }
这个方法在我的情况下工作。
video=getElementsByTagName('video'); function removeControls(video){ video.removeAttribute('controls'); } window.onload=removeControls(video);
