Плохо загружается видео на сайте, в чем причина?

Question

[LastGeneral]

Видео весит - 348 КБ, но периодически просто не начинает проигрывается, а застывает на одном кадре. В чем может быть причина?

<video class="video-pc" autoplay="" loop="">
	<source src="/video/tattoo.mp4" type="video/mp4">
</video>

Comments

[Максим]

звук воспроизводится ?

[LastGeneral]

Максим Ленский, В видео нет звука, это просто небольшое превью на первый экран, но работает через раз

[Максим]

LastGeneral, можно видео разбить на кадры а js менять всего у одной картинки src и получится очень правдоподобный эффект, могу показать

[Виталий Першин]

Максим Ленский, Можно без js https://codepen.io/get-web/pen/pqrvLY

[Максим]

Виталий, осталось нужный спрайт найти или сделать, а в моём варианте из любого видео получится без напрягов

[Виталий Першин]

Максим Ленский, Какое преимущество в том чтобы бы выдергивать кадры из видео и вставлять в img? Почему не канвас?

[Максим]

Виталий, у многих возникают проблемы то из за звука то не хватает скорости интернета то ещё что то ... в итоге меняя кадры можно добиться эффекта видео без самого видео то формат mp4 или ещё какие то куча форматов а так просто img src и меняем его в 1 сек 24 раза

[Виталий Першин]

Максим Ленский, Видео все равно должно быть полностью загружено, а проблемы из-за звука никакой нет, просто надо правильную конфигурацию ставить.

[Максим]

Виталий, вот видите - конфиги всякие и форматы всякие - вместо одного тега img

[Виталий Першин]

Максим Ленский, Для интеграции вашего img через js необходимо выполнить еще больше действий, это явно не просто вставка одного тега и очевидно что ничем не лучше/проще расстановки аттрибутов

[Максим]

Виталий, вы ошибаетесь - там 10 строчек ... и FPS не страдает

[Виталий Першин]

Максим Ленский, 10 строчек js против 2-х нативных атрибутов.. Ок

[Максим]

Виталий, не будет работать на айфонах или на маках, 10 строчек против 5-8 разных форматов видео

[Виталий Першин]

Максим Ленский, Достаточно 2 форматов, при том один запасной для поддержки старых версий браузеров, конвертация это не рендеринг много времени не займет, зато все будет работать как надо, а ваш код не видел и не могу о нем ничего говорить, кроме очевидного.

[Максим]

Виталий, я так и знал что вы скажете что не видели ... ладно пускай будет по вашему - не люблю спорить ...

[Виталий Першин]

Максим Ленский,

я так и знал что вы скажете что не видели ...

Мой хрустальный шар тоже молчит

[Максим]

Виталий, я понятия не иимею куда можно выложить 256 фоток ...за хост я щас не плачу и потому могу скинуть только архив - если желаете

[Виталий Першин]

Максим Ленский, Омг, то есть вы реально физически каждый кадр сохраняете в отдельную картинку, а потом подгружаете? Прокачайте свой код дальше и объедините в спрайт как я вам с самого начала предложил https://codepen.io/get-web/pen/pqrvLY

[Максим]

Виталий, спасибо - не надо - там всё проще чем вам кажется

[Виталий Першин]

Максим Ленский, Да уж, куда проще конвертировать видео в эпизоды, оптимизировать, загонять на клиент 256 изображений, а потом говорить, что у тега video на айфонах будут проблемы..)

[Максим]

Виталий, лан лан вы правы - мой архив весит 11 мгб - как проснётся желание посмотреть напишите - а так хорош - бессмысленно обсуждать - один раз увидите и потом сами будете так делать - особенно увидев скорость загрузки

Answer 1

[Виталий Першин]

Оно у вас иногда запускается потому что во время сессии вы уже производили действия с сайтом. При первом в ходе каждой сессии видео будет стоять на паузе так как необходимо отключить звук для автозапуска:

<video class="video-pc" autoplay="true" loop="true" muted="muted">
  <source src="/video/tattoo.mp4" type="video/mp4">
</video>