В теге video
в качестве атрибута data-src
укажите путь к видео по умолчанию. Внутри тега video
, в тегах source
, указываем значения двух атрибутов data-src
и data-mw
.
data-src
- это путь к видео файлу.
data-mw
- максимальная ширина экрана, на которой должно отображаться это видео.
Это решение срабатывает автоматически при изменении ширины экрана. Это делается с помощью функции resize()
.
<video id="intro-video" data-src="/path/default.mp4" poster="img/poster.png" controls>
<source data-src="/path/1600.mp4" data-mw="1600">
<source data-src="/path/900.mp4" data-mw="900">
<source data-src="/path/480.mp4" data-mw="480">
</video>
class VideoResponser {
constructor(selector) {
const $video = document.querySelector(selector);
this.options = {
selector,
breakpoints: { default: { src: $video.getAttribute('data-src') } }
};
// получаем список точек переключения видео и ссылок на сами видео
$video.querySelectorAll('[data-src]').forEach(element => this.options.breakpoints[element.getAttribute('data-mw')] = { src: element.getAttribute('data-src') });
$video.innerHTML = ''; // очищаем, чтоб небыло ничего лишнего
// запускаем обработчик и отслеживаем изменение ширины экрана
this.responseVideo(this.options);
this.resizer();
}
/** Функция отрабатывающая при изменении ширины рабочей области */
resizer() {
window.addEventListener("resize", () => this.responseVideo(this.options));
}
/**
* Изменение значения src ссылки на видео согласно ширины экрана
*
* @param {Object} options объект опций
*/
responseVideo(options) {
const {selector, breakpoints} = options; // получаем опции
let $video = document.querySelector(selector);
const widthNow = $video.getAttribute('data-width-now') || null;
const maxBreakpoint = Math.max(Object.keys(breakpoints).filter(key => key >= document.body.clientWidth));
const nowBreakpoint = maxBreakpoint || 'default'; // выбираем либо максимальное значение, если нет, то дефолтное
if(widthNow && widthNow == nowBreakpoint) return; // проверяем, нужно ли заменять видео
$video.setAttribute('data-width-now', nowBreakpoint);
$video.src = breakpoints[nowBreakpoint].src;
}
}
new VideoResponser("#video-fon");