web-dev-qa-db-ja.com

HTML5ビデオ//コントロールを完全に隠す

HTML5ビデオコントロールを完全に非表示にするにはどうすればよいですか？

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

falseは機能しませんでした-これはどのように行われますか？

乾杯。

html5video
64
Captain Ron

このような：

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

controlsは ブール属性 です：

注：値「true」および「false」はブール属性では許可されていません。偽の値を表すには、属性を完全に省略する必要があります。

156
robertc

デモのようなCSS擬似セレクターを使用してコントロールを非表示にできます。 https://jsfiddle.net/g1rsasa

//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>
34
AbidCharlotte49er

簡単な解決策は-ユーザーの操作を無視するだけです:-)

video {
  pointer-events: none;
}
16
Jakob E

まず、ビデオの「コントロール」属性を削除します。
iOSの場合、次のCSS擬似セレクターを追加することにより、ビデオの組み込みの再生ボタンを非表示にできます。

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

私の場合、この方法はうまくいきました。

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);
1
Richy Zuo
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
user6884687