HTML5 Video // Полностью скрыть элементы управления

85

Как я могу полностью скрыть элементы управления видео HTML5?

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

false не сработало - как это сделать?

Ура.

html video

— Фред Рэндалл
источник

187

Как это:

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

controlsявляется логическим атрибутом :

Примечание. Значения «истина» и «ложь» не допускаются для логических атрибутов. Чтобы представить ложное значение, атрибут необходимо полностью опустить.

— Роберт
источник

Так что технически это работает; и я думаю, это ответ. Хотя; удаление «Controls» в разметке HTML5 Video убивает видео на iPad; поэтому мне нужно другое решение.

— Фред Рэндалл

1

@ 1977 Этот вопрос, вероятно, актуален

— robertc

3

Вы можете попытаться загрузить тег, включая атрибут управления, и удалить его после загрузки страницы с помощью некоторого javascript: var video = document.getElementById ('myvideo'); video.control = false;

— user3072843

44

The values "true" and "false" are not allowed on boolean attributes. говорить о путанице.

— TotalNotLizards

@jammypeach Атрибуты являются логическими, потому что у них есть два состояния: они существуют или нет

— robertc

47

Вы можете скрыть элементы управления с помощью псевдо-селекторов CSS, таких как 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>

Развернуть фрагмент

— AbidCharlotte49er
источник

Это отлично работает для Chrome, но не для Firefox. У вас есть кроссбраузерное решение?

— TinyTiger

Нужно удалить их с помощью CSS или JavaScript, потому что я что-то взламываю вместе и не могу напрямую редактировать код видео тега

— TinyTiger,

Привет, Бенни, для Mozilla. Вам нужно добавить css с префиксом поставщика для всех из них, например "-moz-media-controls-play-button". Спасибо

— AbidCharlotte49er

1

Пытался добавить префиксы, но ничего не вышло. Вот обновленный JSfiddle и CSS, который я использовал

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

— TinyTiger

1

Можно ли динамически отображать / скрывать какие-либо из этих отдельных элементов управления. Например: примените css video :: - webkit-media-controls-current-time-display {display: none;} изначально, чтобы скрыть текущий контроль времени, но когда видео воспроизводится, покажите текущий контроль времени, обновив класс css видео :: - webkit-media-controls-current-time-display {/ * display: none; * /}. Или примените другой класс css, который показывает текущее время. Благодарю.

— user4848830 05

37

Простое решение - просто игнорировать взаимодействия с пользователем :-)

video {
  pointer-events: none;
}

— Якоб Э
источник

4

Это работает, за исключением того, что элементы управления отображаются при начальной загрузке.

— m4n0

7

Прежде всего, удалите атрибут видео "control".
Для iOS мы могли скрыть кнопку воспроизведения встроенного видео, добавив следующий псевдоселектор CSS:

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

— Алан
источник

3

В моем случае этот метод сработал.

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

— Ричи Цзо
источник

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>

— Фахима Ахмади
источник

Я согласен. Самое простое решение - никогда не ставить атрибут в начале.

— 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); 
}

— пользователь6884687
источник

<! - сделать из полного текста <script src = 'media-player.js'> </script> и поместить в тот же каталог ->

— user6884687