HTML5 Video // Kontrolleri Tamamen Gizle

85

HTML5 video kontrollerini nasıl tamamen gizleyebilirim?

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

false işe yaramadı - bu nasıl yapılır?

Şerefe.

html video

— Fred Randall
kaynak

187

Bunun gibi:

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

controlsbir boole özniteliğidir :

Not: Boole özelliklerinde "true" ve "false" değerlerine izin verilmez. Yanlış bir değeri temsil etmek için, özniteliğin tamamen çıkarılması gerekir.

— Robertc
kaynak

Teknik olarak bu işe yarıyor; ve sanırım cevap bu. Rağmen; HTML5 Video işaretlemesindeki 'Kontrolleri' kaldırmak, videoyu iPad'de sonlandırır; bu yüzden başka bir çözüme ihtiyacım var.

— fred randall

1

@ 1977 Bu soru muhtemelen alakalı

— robertc

3

Etiketi kontrol özniteliği dahil olmak üzere yüklemeyi deneyebilir ve bazı javascript ile sayfa yükledikten sonra etiketi kaldırabilirsiniz: var video = document.getElementById ('myvideo'); video.control = false;

— user3072843

44

The values "true" and "false" are not allowed on boolean attributes. kafa karıştırıcı hakkında konuş.

— totalNotLizards

@jammypeach Öznitelikler boolean çünkü iki durumları var:

— varlar

47

Demo gibi CSS Sözde Seçicileri kullanarak kontrolleri gizleyebilirsiniz: 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>

Snippet'i genişlet

— AbidCharlotte49er
kaynak

Bu, Chrome için harika çalışıyor, Firefox için değil. Çapraz tarayıcı çözümünüz var mı?

— TinyTiger

Bunları CSS veya JavaScript ile kaldırmam gerekiyor çünkü birlikte bir şeyi

— kırıyorum

Mozilla için Hey Benny. "-Moz-media-controls-play-button" gibi satıcı önekli css eklemeniz gerekir. Teşekkürler

— AbidCharlotte49er

1

Ön ekleri eklemeye çalıştım ama işe yaramadı. İşte güncellenmiş bir JSfiddle ve işte kullandığım CSS

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

— TinyTiger

1

Bu bağımsız kontrollerden herhangi birini dinamik olarak göstermek / gizlemek mümkün mü? Örneğin: css video :: - webkit-media-controls-current-time-display'i uygulayın {display: none;} başlangıçta geçerli zaman kontrolünü gizlemek için, ancak video oynatıldığında css sınıfını güncelleyerek mevcut zaman kontrolünü gösterin video :: - webkit-media-controls-current-time-display {/ * display: none; * /}. Veya geçerli saati gösteren farklı bir css sınıfı uygulayın. Teşekkürler.

— user4848830

37

Basit bir çözüm - sadece kullanıcı etkileşimlerini görmezden gelmek :-)

video {
  pointer-events: none;
}

— Jakob E
kaynak

4

Bu, kontrollerin ilk yüklemede gösterilmesi dışında çalışır.

— m4n0

7

Her şeyden önce, videonun "kontroller" özelliğini kaldırın.
İOS için, aşağıdaki CSS sözde seçicisini ekleyerek videonun oluşturdaki oynatma düğmesini gizleyebiliriz:

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

— Alan
kaynak

3

Bu yöntem benim durumumda çalıştı.

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

— Richy Zuo
kaynak

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
kaynak

Katılıyorum. En basit çözüm, özniteliği asla başlangıç noktasına koymamaktır.

— 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
kaynak

<! - tam metinden <script src = 'media-player.js'> </script> oluşturun ve aynı dizine koyun ->

— user6884687