видео исчезает, когда заданы атрибут постера и предварительная загрузка

У меня есть видео-тег со следующими атрибутами:

 <video width="xx" height="xx" poster="image.jpg" preload="auto">

Мне нужно показать изображение плаката, и я хочу, чтобы видео было предварительно загружено.
Я не показываю элементы управления браузера, а управляю видео вручную с помощью пользовательских элементов управления (CSS и Javascript). Видео должно запускаться, когда я нажимаю на него.

В Firefox это работает так, как задумано: я нажимаю на изображение плаката, и начинается видео. Нажимаю на видео, видео останавливается.

Однако в текущих браузерах webkit (Safari 6.0.2, Chrome 23.0.1271.64) это не работает:
Как только я нажимаю на изображение плаката, видео становится невидимым, оставляя меня пустая (белая) коробка. Я слышу звук, но вижу видео. Когда я нажимаю на это поле, звук прекращается.

Если я установлю preload="none" или оставьте изображение-плакат, это снова будет работать в браузерах webkit.

Есть ли какой-нибудь обходной путь для этого?


html video preload webkit poster
person basbebe    schedule 21.11.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

У меня была аналогичная проблема. Вроде бы сейчас в Safari все в порядке, но Chrome 27 все еще плохо себя ведет. Это решение, которое я использую (заимствовано из принятого ответа на этот вопрос: Элемент видео исчезает в Chrome, если элементы управления не используются).

JS

$(document).ready(function(){
    $("#video").on('play',function(){
        if (this.getAttribute('controls') !== 'true') {
            this.setAttribute('controls', 'true');                    
        }
        this.removeAttribute('controls');
    });
});

HTML

<video id="video" preload="auto" loop="loop" autoplay="autoplay" poster="picture.png">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    Your browser sucks.
</video>

Где picture.png - изображение вашего постера, а video.mp4 и video.webm - ваши видео.

Вот рабочий скрипт js: http://jsfiddle.net/2n5Yj/1/

person danieltjewett    schedule 20.06.2013

arrow_upward
2
arrow_downward

У меня была такая же проблема, но было проще исправить при использовании videojs -

http://www.videojs.com/

Они включают отдельный div для плаката - я просто добавил немного CSS, чтобы перезаписать их по умолчанию:

.vjs-poster {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 20;
}

Я понимаю, что дополнительные накладные расходы библиотеки videohtml не могут быть оптимальным решением. Просто отправьте сообщение на случай, если это будет сочтено целесообразным / чтобы те, кто уже его использует, могли воспользоваться этим.

person qwertyisms    schedule 07.08.2014