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

Question

Вместе с изображением плаката я хочу, чтобы изображение загрузчика (анимированный GIF-файл) отображалось во время загрузки видео. Как это возможно?

Answer 1

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

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

Answer 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, который показывает мой код здесь

Answer 3

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

Моя оригинальная теория, которая, как я думал, должна была сработать (но не сработала), заключалась в следующем

1. Добавить загрузку изображения bg к видео при загрузке через js и css
2. Удалите, когда будете готовы к игре

Простой, верно? Проблема заключалась в том, что я не мог заставить фоновое изображение показывать, когда были установлены исходные элементы или был установлен атрибут 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')
  });

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

Answer 4

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

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

Answer 5

<video id="mainVideo" width="100%"
            style="max-width: 100%; max-height: 100%;" preload="auto" 
             autoplay="autoplay" (loadeddata)= 
            "checkVideoLoaded()">
            <source [src]="assets?.video?.urlMP4"  type="{{videoType}}">
</video>

на isVideoLoaded флаг показать и скрыть загрузчик

this.isVideoLoaded = false;

checkVideoLoaded(){
 this.isVideoLoaded = true;
}

Answer 6

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