Автоматическое воспроизведение очереди видео с использованием Intersection Observer API

JavaScript React.js
Автоматическое воспроизведение очереди видео с использованием Intersection Observer API

предисловие

Я использовал свое свободное время для исследованияjavascriptизIntersection Observer API, обнаружил, что у него есть отличные сценарии приложений, такие как отложенная загрузка изображений или контента, анимация параллакса и т. д. Автор также подробно представил 3 вида в предыдущей статье.Observerиспользование (наблюдателем), в том числеМониторинг местоположения,монитор изменения домтак же какИзменить окно прослушивателя, у них очень много сценариев применения, так что надо изучить и понять, Если вам интересно, вы можете узнать это после прочтения этой статьи (Резюме нескольких очень интересных моментов знания javascript).

Вот очень распространенный пример.Друзья, которые обычно любят смотреть короткие видео, могут заметить, что когда мы просматриваем заголовок видео, мы прокручиваем список видео (в центре), видео будет воспроизводиться автоматически, когда оно выходит за пределы обозначенного область, видео автоматически закроется и воспроизведет следующее видео, перемещенное в указанную область, следующим образом:

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

Первая идея автора состоит в том, чтобы контролировать положение прокрутки, чтобы определить, достиг ли определенный видеоэлемент обозначенной области, но этот метод должен иметь дело со многими условиями, такими как оценка граничных условий, оценка направления прокрутки и т. д., а частые срабатывания будут также вызывают проблемы с производительностью.

К счастью, я тщательно исследовалIntersection Observer API, обнаружил, что можно использовать предоставляемый им API, очень удобно следить за изменением положения элемента под указанным корневым элементом, и выполнять некоторые пользовательские операции:

Автор будет использовать непосредственноIntersection Observerпредоставил API для реализацииВидео воспроизводится автоматически при прокруткефункция, если вы не знакомы с API, вы можете переместитьРезюме нескольких очень интересных моментов знания javascript

Автор плагина воспроизведения видео будет использовать более популярныйDplayer, он может легко управлять отображением видео и достигать очень хорошего эксклюзивного управления воспроизведением, а также поддерживает заграждение.

текст

Согласно приведенному выше введению, у нас есть общее представление о конкретных потребностях, а затем мы будем основываться наIntersection Observer APIСделай это. Идея примерно такая:

Конкретная идея заключается в том, что мы можемIntersection Observerкорневого элементаrootMargin(то есть внешнее поле корневого элемента) устанавливается в область, показанную синим цветом на приведенном выше рисунке, а затем, когда видео полностью входит в эту область (то есть,thresholdsКогда порог равен 1), запустить воспроизведение текущего видео. потому что мы используемDplayer, поэтому нам нужно только установить его в свойствах конфигурацииmutexСвойство имеет значение true (при значении true несколько игроков не могут играть одновременно, а другие игроки будут поставлены на паузу, пока играет текущий игрок). О настройкахrootMarginзнания, вы можете обратиться к следующему рисунку:
rootMarginФормат получения следующий: "10px 0px 10px 0px", цифры обозначают слева направоtop(начальство)right(правильно)bottom(Вниз)left(Левое) поле, конечно, мы также можем использовать процент (%) в качестве единицы.Когда это положительное значение, это означает расширение диапазона полей для большего количества элементов, а отрицательное значение означает уменьшение диапазона полей корневого элемента. , Здесь мы должны уменьшить диапазон, поэтомуrootMarginМы можем установить "-180px 0px -180px 0px", чтобы уменьшить верхнее и нижнее поля. Конечно, вы также можете установить другие значения в соответствии с вашими потребностями.

Используя приведенные выше идеи, мы можем добиться эффекта, показанного на анимации выше. Для его реализации автор будет использовать react.Перед реализацией мы подготовим несколько видеоматериалов, а затем реализуем базовый фреймворк списка:

import React, { useEffect, useState } from 'react'
import VideoItem from 'components/VideoItem'
import styles from './videoList.less'

const data = [
    // 视频列表
]

function VideoList(props) {
  useEffect(() => {
    let observerVideo = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach(entry => {
                // 当移入指定区域内后，播放视频
                if(entry.intersectionRatio === 1) {
                    // 一些操作
                    return
                }
                // 停止监听
                // observer.unobserve(entry.target);
              });
            }, 
            {
              root: document.getElementById('scrollView'),
              rootMargin: '-180px 0px -180px 0px',
              threshold: 1
            }
        );
        document.querySelectorAll('.video-item').forEach(video => { observerVideo.observe(video) });
  }, [])
  return <div className={styles.videoWrap}>
    <div className={styles.list} id="scrollView">
        {
            data.map(item => {
                return <VideoItem src={item} groupName="video-item" key={item} />
            })
        } 
    </div>
  </div>
}

export default VideoList

в приведенном выше кодеVideoItemМы представим компоненты позже, и сейчас есть проблема, что мы отслеживали элементы видео, которые должны воспроизводиться автоматически, но как мы уведомляемVideoItemкомпонент, чтобы заставить его играть? Здесь автор реализует идею датьVideoItemДобавьте пользовательский атрибут, значение которого является SRC текущего видео. Когда мы слушаем видеоэлемент, который необходимо воспроизводиться, мы можем получить настройки пользовательского атрибута, а затем использовать его какpropперейти кVideoItem,когдаVideoItemкомпонент слушаетpropКогда он изменяется и равен своему собственному src, он запускает воспроизведение видео. код показывает, как показано ниже:

// VideoItem.js
import React, { useRef, useEffect } from 'react';
import DPlayer from 'dplayer';

export default (props) => {
    let videoRef = useRef(null)
    let dpRef = useRef(null)
    let { src, groupName, curPlaySrc } = props
    useEffect(() => {
        dpRef.current = new DPlayer({
            container: videoRef.current,
            screenshot: true,
            video: {
                url: src,
                thumbnails: 'logo.png'
            },
            logo: 'logo.png'
        });
    }, [])

    useEffect(() => {
        // 当当当前应该播放的视频url等于当前视频组件的src时，播放视频
        if(curPlaySrc === src) {
            dpRef.current.play()
        }
    }, [curPlaySrc])
    return <div data-src={src}>
        <div ref={videoRef}></div>
    </div>
}

В настоящее время код страницы со списком видео выглядит следующим образом:

// ...
function VideoList(props) {
  const [curPlaySrc, setCurPlaySrc] = useState('')
  useEffect(() => {
    let observerVideo = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach(entry => {
                // 当移入指定区域内后，播放视频
                if(entry.intersectionRatio === 1) {
                    // 设置当前因该播放的视频url
                    setCurPlaySrc(entry.target.dataset.src)
                    return
                }
              });
            }, 
            {
              root: document.getElementById('scrollView'),
              rootMargin: '-180px 0px -180px 0px',
              threshold: 1
            }
        );
        document.querySelectorAll('.video-item').forEach(video => { observerVideo.observe(video) });
  }, [])
  return <div className={styles.videoWrap}>
    <div className={styles.list} id="scrollView">
        {
            data.map(item => {
                return <VideoItem src={item} groupName="video-item" key={item} curPlaySrc={curPlaySrc} />
            })
        } 
    </div>
  </div>
}

Вышеуказанные шаги завершают функцию автоматического воспроизведения видео на основе указанной области, и эффект выглядит следующим образом:

Адрес опыта

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории