Chrome и Safari HTML5 рендеринг видео.Висит на первом кадре.

Question

Реальная проблема с отображением видео в Chrome и Safari.Видео, кажется, только запускается после нескольких обновлений страницы.Не уверен, почему это так.Я думаю, что это как-то связано с тем, как Chrome и Safari рендерит видео.

В Firefox у меня нет проблем с запуском видео.Вот HTML

<video width="100%" height="100%" preload="auto" loop autoplay style="visibility: visible; width: 
 1321px; height: 744px; opacity: 1;">
  <source src="https://d- 
  360.nyc3.digitaloceanspaces.com/2018/06/video_2.mp4" type="video/mp4"> 
</video>

Answer 1

Действительно хороший ответ от Offbeatmammal относительно сжатия.Видео действительно нужно сжать.

Я сжал с помощью ffmpeg, используя следующую команду.

ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4

Загрузил видео, но все еще не повезло с хромом и сафари видео, висящим на первом кадре.Так что это не было проблемой размера.

Добавлен приглушенный атрибут - решение

Я взял разметку видео и запустил ее за пределами моего сайта в коде ручки на chrome , и проблема была повторена.После тщательного изучения атрибутов я заметил, что в разметке видео не добавлен атрибут muted="".

Откройте перо с кодом и посмотрите первое видео.Нет приглушенного атрибута..После того как я применил атрибут отключения звука muted="", видео воспроизводилось в Chrome и Safari. Откройте код пером и посмотрите второе видео.Добавлен отключенный атрибут .<video width="100%" height="100%" preload="auto" loop="" autoplay="" muted="".

ВАЖНО

Это проблема только с хромом и сафари.В Firefox видео будет воспроизводиться.Поэтому, если вы собираетесь добавить html5-видео на свой сайт, убедитесь, что вы включили атрибут muted="".

Answer 2

Я заметил, что загрузка загружалась довольно медленно, поэтому я предполагаю, что это проблема производительности / кэширования сервера.

Некоторые из них можно решить, используя что-то вроде ffmpeg перекодировать с атомом MOOV в начале видео (это позволит быстрее начать воспроизведение), например:

ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4

, если производительность все еще низкая, тогда вы можете захотеть ограничить битрейт, чтобыскорость загрузки справочного адреса (текущее видео составляет около 2,5 Мбит / с), например:

ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4

(это приводит к перекодированию видео с использованием высококачественного подарка, но ограничивает битрейт до 1,5 Мбит / с ... возможно, вам придется поэкспериментироватьс этим значением, чтобы получить компромисс между качеством и производительностью)

В зависимости от желаемой выходной стороны, если вам не нужен полный размер кадра 720p, вы можете добавить дополнительное ограничение на транскод, чтобы ограничить этоНапример:

ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4

Вы также должны убедиться, что на вашем сервере разрешено кэширование контента, поэтому при воспроизведении видеоне всегда нужно возвращаться на ваш сервер