[html][js] Автопереключение видео при изменении ширины экрана

126

В теге 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");