Как сделать фоновое видео на сайте как у Apple?

Question

[Aleem Abel]

Как сделать фоновое видео как на сайте у Apple в разделе Apple Tv+. У низ оно фоном и на нем текст, и оно грузится быстро на все устройствах будь-то Iphone, Android или Desktop. Что бы оно грузилась в Safari в Chrome, быстро, качественно, и не грузило сильно устройство, загружалось быстро. Как? Помогите пожалуйста.

Answer 1

[Кирилл Прогер]

<video autoplay loop>
   <source src="video/video2.mp4" type="video/mp4">
   <source src="video/video1.webm" type="video/webm">
   <source src="video/video3.ogv" type="video/ogg"/>
</video>

video{
   position:fixed;
   z-index:-1;
   min-width:100%;
   min-height:100%;
   overflow:hidden;
}

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

Comments

[Aleem Abel]

Кирилл, а оно будет грузится автоплеем на ios устройствах в Safari?

[Aleem Abel]

Вот это подойдет:

<video preload="metadata" muted="muted" autoplay playsinline loop></video>

[Aleem Abel]

?

[Кирилл Прогер]

ocean4real,

<video preload="metadata" muted="muted" autoplay playsinline loop></video>

То что я написал только добавил 2 параметра preload="metadata" - "Этот атрибут игнорируется, если установлен autoplay."

[yarovikov]

ocean4real, на ios 10 и новее

[Aleem Abel]

<video muted loop playsinline class="mediaobject-ios-inline-video mediaobject-element" src="https://www.apple.com/105/media/us/apple-tv-plus/2019/c5a05301_ed18_47f6_a7f8_bba47bf3e0f4/anim/sizzle-reel/large.mp4" style="width: 100%; height: auto; visibility: visible;"></video>

В итоге оно вот так будет работать?

[Кирилл Прогер]

ocean4real, Чисто теоритически да, но нужно тестировать

[lamer350]

зачем в 2к19 webm и ogv?

[Aleem Abel]

Парни вот,

[Aleem Abel]

https://codepen.io/dudleystorey/pen/kkYawX?editors=1000