Удалите черную загрузку при просмотре видео в формате HTML5

Я создаю сайт для онлайн-игры, в которую я играю. В заголовке у меня есть видео HTML5, которое играет очень кратко (1 секунда). В Internet Explorer проблем нет, однако в Chrome при загрузке видео есть очень кратковременная вспышка черного экрана. Есть ли способ удалить эту вспышку, или, если это не так, сделать ее белой, чтобы она соответствовала фону? Вы можете видеть, что я имею в виду здесь http://testingfortagpro.meximas.com/. Если вы попробуете его в IE и Chrome, вы увидите разницу в том, как загружается видео. Альтернативно, есть ли лучший способ реализовать это? Я попытался использовать анимированный GIF, но качество значительно сократилось.

Спасибо!

Ответ 1

Раздел "Плакат" этого сообщения указывает на следующее:

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

Таким образом, вы не можете исправить это, просто добавив белый цвет к элементу video... но вы можете добавить простое изображение с белым плакатом:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" >
  <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4">
</video>

Ответ 2

Вы можете использовать прозрачный плакат gif:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Но этого было недостаточно, чтобы устранить мигание в Firefox. Я закончил тем, что скрыл видео до тех пор, пока он не сыграет:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">

Отрегулируйте тайм-аут по своему усмотрению. Когда я не использовал автовоспроизведение, мне пришлось увеличить его до 400 мс.

Ответ 3

У меня была такая же проблема, и я исправил ее, сокрыв элемент видео с помощью экрана CSS: none, пока элемент видео не сообщит, что он закончил загрузку через свое событие onLoadedData, и в ответ на это событие я установил display: block.

Это избавилось от черной вспышки.

Ответ 4

Вставка атрибута плаката в тег видео не остановила, когда черный ящик мигает, когда пользователь обновляет страницу, однако я использовал функцию hide на событии "beforeunload", и теперь черная вспышка исчезла.

$(window).on('beforeunload', function() {
   $("video").hide();
});

Ответ 5

У меня была такая же мигающая проблема в Firefox, даже с набором атрибутов плаката. Я исправил это, добавив фоновое изображение в тег видео, соответствующий первому кадру моего видео.

Ответ 6

$(window).on('beforeunload', function() {$ ( "video" ). hide();});

Это скроет элемент видео незадолго до того, как окно выгрузит и загрузит следующий документ.