Как сделать загрузочное изображение при загрузке видео HTML5?

Ответ 1

Мне потребовалось слишком много времени, чтобы на самом деле выяснить, как это сделать, но я собираюсь поделиться им здесь, потому что я НАКОНЕЦ нашел способ! Что смешно, когда вы думаете об этом, потому что загрузка - это то, что нужно делать всем видео. Вы бы подумали, что они учли бы это при создании стандарта видео html5.

Моя первоначальная теория, о которой я думал, должна была работать (но не была), была

• Добавить загрузку bg-изображения в видео при загрузке через js и css
• Удалить, когда готов к воспроизведению.

Простой, не так ли? Проблема заключалась в том, что я не мог получить фоновое изображение, чтобы показать, когда были установлены исходные элементы или установлен атрибут video.src. Последним ударом гения/удачи было выяснить (посредством экспериментов), что фоновое изображение не исчезнет, ​​если плакат настроен на что-то. Я использую изображение поддельного плаката, но я думаю, что это будет работать также с прозрачным изображением 1x1 (но зачем беспокоиться о другом изображении). Таким образом, это делает это, вероятно, своего рода взломом, но он работает, и мне не нужно добавлять дополнительную разметку в мой код, а это значит, что он будет работать во всех моих проектах с использованием видео html5.

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS (класс загрузки, применяемый к видео с JS)

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

JS

  $('#video_id').on('loadstart', function (event) {
    $(this).addClass('loading');
  });
  $('#video_id').on('canplay', function (event) {
    $(this).removeClass('loading');
    $(this).attr('poster', '');
  });

Это отлично работает для меня, но проверяется только на хром и сафари на Mac. Дайте мне знать, если кто-нибудь найдет ошибки и улучшения!

Ответ 2

Также простое решение для добавления изображения перед загрузкой при загрузке видео: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

плакат представляет собой прозрачное изображение 1px.

CSS

  video {
  background-image: url(images/preload_30x30.gif);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
  }

Ответ 3

Используйте плакат с идентификатором тега

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

Дополнительная информация может быть найдена http://www.w3schools.com/html5/att_video_poster.asp

Ответ 4

Возможно, вы могли бы сделать это с помощью JavaScript, создав наложение изображений с анимированным "загрузочным" gif, который вы показываете только при загрузке видео и не готовы к воспроизведению.

Вам нужно будет написать JavaScript для связи с Media API для обнаружения, когда видео будет готово к воспроизведению и т.д. (так что вы можете скрыть изображение снова), но это должно быть возможно.

Ответ 5

Моим решением было добавить следующее внутри window.fbAsyncInit = function():

var finished_rendering = function() {
    var el = document.querySelector('div#loading_msg');
    el.style.display="none";
}

FB.Event.subscribe('xfbml.render', finished_rendering);

Найдено: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

Ответ 6

Лично я думаю, что самый элегантный способ сделать это, используя такой код,

<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>

<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>

Чтобы сделать его еще лучше, вы можете использовать ontimeupdate вместо onplaying, который будет работать непрерывно. Что касается времени задержки, то на самом деле не 1, а 4 секунды. -to me- - лучшее.