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