Это продолжение статьи о адаптивном показе видео из разных источников. Здесь я расскажу о MP4.
HTML 5 позволяет решить задачу с минимальными усилиями. Есть только одна вещь, которая заставит немного повозится. Это автозапуск ролика на мобильных.
К примеру, на iPhone X, Safari iOS в консоли браузера, вы может увидите сообщение о том, что браузер запретил воспроизведение, так как возможно пользователь не давал своего согласия на это действие.
Преодолевается это флажком controls— разрешить элементы управления. Который будем включать только для safari.
|
1 2 3 4 5 6 7 |
<script> var video_url = 'ваш видосик'; document.write('<video autoplay muted loop playsinline ' + (window.safari !== undefined ? 'controls="true"' : '') + 'frameborder="0" type="video/mp4" class="video-js" src="' + video_url + '">\ </video>'); </script> |
muted — выключает звук, т.к. мы используем видео как фон,
autoplay — выполняет автозапуск,
loop — повторно воспроизводит ролик после завершения,
playsinline — решает ещё одну проблему мобильных — воспроизводит видео inline, не разворачивая его на весь экран.
Осталось добавить немного стилей. Я использовал в примере класс video-js, стили применю к нему:
|
1 2 3 4 5 6 7 |
<style> .video-js { object-fit: cover; width: 100%; height: 100%; } </style> |
А вот живой пример (размеры блока на десктопе можно менять, потянув за правый нижний угол):