Відео HTML5 // Повністю приховати елементи керування

84

Як я можу повністю приховати елементи керування відео HTML5?

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

false не спрацювало - як це робиться?

Ура.

html video

— Террі Холл
джерело

185

Подобається це:

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

controlsє логічним атрибутом :

Примітка: Значення "true" і "false" не допускаються для логічних атрибутів. Для подання хибного значення атрибут потрібно взагалі пропустити.

— robertc
джерело

Тож технічно це працює; і я думаю, це відповідь. Хоча; видалення "елементів керування" під розміткою HTML5 Video вбиває відео на iPad; тому я потребую іншого рішення.

— Terry Hall

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. говорити про заплутаність.

— totallyNotLizards

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

— robertc

44

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

— зломлюю

Ей, Бенні, для 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

Бенні, я перевірив у документі Mozilla, що псевдо CSS постачальника з префіксом недоступний. Ви можете впоратися з цим за допомогою JavaScript. Будь ласка, перегляньте мій фрагмент коду. вище. Я відредагував своє оригінальне рішення. «Для Firefox ми маємо обробляти це в JavaScript» Дякую Успіху

— AbidCharlotte49er

35

Просте рішення - просто ігнорувати взаємодію користувачів :-)

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