使用Intersection Observer API实现视频队列自动播放

时间 2020-05-31

标签使用 intersection observer api 实现视频队列自动播放栏目 Hadoop 繁體版

原文原文链接

前言

笔者利用空余时间研究了一下javascript的Intersection Observer API，发现其有很大的应用场景，好比图片或者内容的懒加载，视差动画等。笔者也在以前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有很是多的应用场景，因此颇有必要研究明白，感兴趣的能够读完本片文章以后学习一下（几个很是有意思的javascript知识点总结）.javascript

这里有一个很常见的例子，平时喜欢看短视频的朋友可能会注意到，咱们在浏览某视频头条时，滚动视频列表，当某一个视频滚动到手机的必定位置时（通常能够当作是屏幕中心），该视频会自动播放，当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频，以下： css

做为一名好奇心极强的前端工程师，有必要好好研究一下其内部实现。

笔者的第一思路就是监听滚动位置来判断某个视频元素是否到达指定区域内，可是这种方式须要处理的条件不少，好比边界条件判断，滚动方向判断等，并且频繁触发还会出现性能问题。前端

好在笔者以前深刻研究过Intersection Observer API，发现可使用它提供的API，很方便的监听到元素在指定根元素下的位置变化，并作一些自定义操做： vue

笔者接下来将直接利用Intersection Observer提供的api来实现视频在滚动的过程当中自动播放的功能，若是对该api不太熟悉的朋友能够移步几个很是有意思的javascript知识点总结java

视频播放插件笔者将使用比较流行的Dplayer,它能够很方便的操做视频的展示并实现很好的排他性播放控制，而且支持弹幕。node

正文

根据以上的介绍咱们大体了解了具体的需求，接下来咱们就来基于Intersection Observer API实现一下它。思路大体以下图所示： react

具体思路就是咱们能够把 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来实现，在实现以前咱们先准备几个视频素材，而后实现列表基本框架：webpack

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添加一个自定义属性，该属性的值就是当前video的src，咱们在监听到某个视频元素须要播放时，咱们能够获取到以前设置的自定义属性，而后做为prop传给VideoItem，当VideoItem组件监听到该prop变化时，而且等于自身的src，此时则触发视频播放。代码以下：css3

// 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> } 复制代码

以上步骤即完成了基于指定区域自动播放视频的功能，效果以下：

体验地址

最后

若是想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入咱们的技术群一块儿学习讨论，共同探索前端的边界。

使用Intersection Observer API实现视频队列自动播放

前言

正文

体验地址

最后

更多推荐