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

Ответ 1

Дешевым способом может быть использование анимированного GIF в атрибуте poster, который будет заменен при воспроизведении видео. Пример:

<video poster="loading.gif" preload="auto" controls autoplay>
   <source type="video/mp4" src="video.mp4"/>
</video>

Ответ 2

Вот мое решение для этой проблемы, так как ответ pixelearth не работает на firefox (возможно, проблема с фальшивым плакатом)

HTML

<video id="video1" height="236" preload="auto" controls>
  <source src="yourVideo.mp4">
  Your browser does not support HTML5 video.
</video>

JS

$('#video1').on('loadstart', function (event) {
  $(this).addClass('background');
  $(this).attr("poster", "/your/loading.gif");
});

$('#video1').on('canplay', function (event) {
  $(this).removeClass('background');
  $(this).removeAttr("poster");
});

CSS

video.background {
  background: black
}

С этим ответом вам не нужно возиться с фальшивыми плакатами или злоупотреблять атрибутами для целей, для которых они не были сделаны. Надеюсь, это поможет.

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

Вы можете найти jsfiddle, который показывает мой код здесь

Ответ 3

Вы можете подключить прослушиватель к событию видео loadstart и использовать его для наложения анимированного GIF поверх видеоэлемента, а затем скрыть накладку загрузки после срабатывания события loadeddata. См. Проект W3C media events для списка событий, в которые вы можете подключиться.

У них также есть демонстрационная страница для мультимедийных событий.

Ответ 4

Мне потребовалось слишком много времени, чтобы на самом деле выяснить, как это сделать, но я собираюсь поделиться им здесь, потому что я НАКОНЕЦ нашел способ! Что смешно, когда вы думаете об этом, потому что загрузка - это то, что нужно делать всем видео. Вы бы подумали, что они учли бы это при создании стандарта видео 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')
  });

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

Ответ 5

Это довольно сложно, вы должны прослушивать различные видео-события, чтобы отображать/скрывать и обновлять ширину изображения загрузчика правильно. Эти события включают (но могут не ограничиваться): loadstart, progress, loadeddata, waiting, seeking, seeked. Вы можете использовать определенный проигрыватель с открытым исходным кодом (например, jPlayer) или загрузить его источник для дальнейшего изучения.