Максимальная оптимизация видео

[Akkord87]

Здравствуйте.

Верстаю сайт и до этого никогда не сталкивался с фоновым видео на сайте. Задача сделать видео максимально легким при этом оно не должно ухудшиться в качестве. Видео длительностью 1:36 сек, в формате mp4 , общий размер видео (несжатый) 116мб. Естественно его нужно ужать в разы, но вот без понятия, какие хорошие сервисы для этого есть. Само видео на сайте будем вставлено через тег video.

И еще пару вопросов:

- какие форматы видео еще стоит загрузить или будет достаточно только mp4?

- в тег video так же можно прописать src картинки. Будет ли эта картинка автоматически подставляться, если видео по каким либо причинам не воспроизведется в браузере пользователя?

 

[ShumNo]

дело не в формате, формат по большому счету один. дело в кодеке.

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

 

Скачайте что-нибудь по работе с видео и покрутите кодеки + качество. Если видео fullhd то потери в качестве чтобы хотябы влезть в 10 метров будут крайне большими

[Alex_]

У меня так сделано - вырезал кусок небольшой видео и зациклил

в html

<div id="videoContainer">
    <video poster="Images/bck1.jpg" autoplay loop >
    <source src="Video/Blu_Wave.mp4 " type="video/mp4">
  </video>
</div>

в css

#videoContainer {
  overflow: hidden;
  z-index: -2;
  position: absolute;
  height: 100%;
  width: 100%;}
 

 

[Akkord87]

7 минут назад, ShumNo сказал:

дело не в формате, формат по большому счету один. дело в кодеке.

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

 

Скачайте что-нибудь по работе с видео и покрутите кодеки + качество. Если видео fullhd то потери в качестве чтобы хотябы влезть в 10 метров будут крайне большими

Пробовал это видео через youtube ужимать, получилось 23мб, но немного качество ухудшилось. Так же смотрел сайты с фоновым видео, где видео с такой же продолжительностью весит всего 5мб, при этом качество очень хорошее. Я вот не понимаю, как они это сделали:)

7 минут назад, Alex_ сказал:

У меня так сделано - вырезал кусок небольшой видео и зациклил

в html

<div id="videoContainer">
    <video poster="Images/bck1.jpg" autoplay loop >
    <source src="Video/Blu_Wave.mp4 " type="video/mp4">
  </video>
</div>

в css

#videoContainer {
  overflow: hidden;
  z-index: -2;
  position: absolute;
  height: 100%;
  width: 100%;}
 

Ну у меня почти так же, только тегом source не пользовался, так как в данном случае используется один формат видео и путь к нему можно прописать сразу в теге vedeo

 

[Alex_]

Video: MPEG4 Video (H264) 864x486 29.97fps 958kbps свойства видео файла

длится 10 секунд, надо еще напополам чикнуть 

весит 1,14 МБ

кручу в полном экране на мониторе1920х1200

все классно вот скрин

 

[Akkord87]

27 минут назад, Alex_ сказал:

Video: MPEG4 Video (H264) 864x486 29.97fps 958kbps свойства видео файла

длится 10 секунд, надо еще напополам чикнуть 

весит 1,14 МБ

кручу в полном экране на мониторе1920х1200

все классно вот скрин

 

У меня такой кусок отрезать не получится, так как там цельное видео, специально смонтированное для сайта(