[[420253]]

前言

去年利用空余時(shí)間研究了一下javascript的Intersection Observer API，發(fā)現(xiàn)其有很大的應(yīng)用場(chǎng)景，比如圖片或者內(nèi)容的懶加載，視差動(dòng)畫等。我也在之前的文章中詳細(xì)介紹了3種Observer(觀察者)的用法，包括位置監(jiān)聽，dom變化監(jiān)聽以及窗口變化監(jiān)聽，它們有非常多的應(yīng)用場(chǎng)景，所以很有必要研究明白， 感興趣的可以讀完本片文章之后學(xué)習(xí)一下(幾個(gè)非常有意思的javascript知識(shí)點(diǎn)總結(jié)).

這里有一個(gè)很常見的例子，平時(shí)喜歡看短視頻的朋友可能會(huì)注意到，我們?cè)跒g覽某視頻頭條時(shí)，滾動(dòng)視頻列表，當(dāng)某一個(gè)視頻滾動(dòng)到手機(jī)的一定位置時(shí)(一般可以看成是屏幕中心)，該視頻會(huì)自動(dòng)播放，當(dāng)移出指定區(qū)域后視頻會(huì)自動(dòng)關(guān)閉并播放移入指定區(qū)域的下一個(gè)視頻，如下：

作為一名好奇心極強(qiáng)的前端工程師，有必要好好研究一下其內(nèi)部實(shí)現(xiàn)。

我的第一思路就是監(jiān)聽滾動(dòng)位置來判斷某個(gè)視頻元素是否到達(dá)指定區(qū)域內(nèi)，但是這種方式需要處理的條件很多，比如邊界條件判斷，滾動(dòng)方向判斷等，而且頻繁觸發(fā)還會(huì)出現(xiàn)性能問題。

好在之前深入研究過Intersection Observer API，發(fā)現(xiàn)可以使用它提供的API，很方便的監(jiān)聽到元素在指定根元素下的位置變化，并做一些自定義操作：

接下來我將利用Intersection Observer提供的api來實(shí)現(xiàn)視頻在滾動(dòng)的過程中自動(dòng)播放的功能，如果對(duì)該api不太熟悉的朋友可以移步

幾個(gè)非常有意思的javascript知識(shí)點(diǎn)總結(jié)

視頻播放插件筆者將使用比較流行的Dplayer,它可以很方便的操作視頻的展現(xiàn)并實(shí)現(xiàn)很好的排他性播放控制，并且支持彈幕。

正文

根據(jù)以上的介紹我們大致了解了具體的需求，接下來我們就來基于Intersection Observer API實(shí)現(xiàn)一下它。思路大致如下圖所示：

具體思路就是我們可以把Intersection Observer的根元素的rootMargin(即根元素的外邊距)設(shè)置為如上圖藍(lán)色所示區(qū)域，然后當(dāng)視頻完全進(jìn)入該區(qū)域內(nèi)后(也就是thresholds閾值為1時(shí))，觸發(fā)當(dāng)前視頻的播放即可。因?yàn)槲覀兪褂玫氖荄player，所以我們只要將其配置屬性中的mutex屬性設(shè)置為true(為true時(shí)會(huì)阻止多個(gè)播放器同時(shí)播放，當(dāng)前播放器播放時(shí)暫停其他播放器)。有關(guān)設(shè)置rootMargin的知識(shí)，可以參考下圖介紹：

rootMargin接收格式如下："10px 0px 10px 0px",從左到右數(shù)字依次代表top(上) right(右) bottom(下) left(左)邊距，當(dāng)然我們單位也可以使用百分比(%),為正值時(shí)代表擴(kuò)大更元素的邊距范圍，負(fù)值代表縮小根元素的邊距范圍，這里我們應(yīng)該縮小范圍，所以rootMargin我們可以這么設(shè)置"-180px 0px -180px 0px",這樣上下的邊距就會(huì)縮小，當(dāng)然大家也可以根據(jù)需求設(shè)置不同的值。

有了以上思路之后我們就可以實(shí)現(xiàn)上文動(dòng)圖所展示的效果了。筆者將采用react來實(shí)現(xiàn)，在實(shí)現(xiàn)之前我們先準(zhǔn)備幾個(gè)視頻素材，然后實(shí)現(xiàn)列表基本框架：

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 => { 
                // 當(dāng)移入指定區(qū)域內(nèi)后，播放視頻 
                if(entry.intersectionRatio === 1) { 
                    // 一些操作 
                    return 
                } 
                // 停止監(jiān)聽 
                // 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組件我們后面會(huì)介紹，現(xiàn)在有個(gè)問題是我們已經(jīng)監(jiān)聽到了需要自動(dòng)播放的視頻元素，但是我們?nèi)绾瓮ㄖ猇ideoItem組件讓其播放呢?這里筆者實(shí)現(xiàn)思路是給VideoItem添加一個(gè)自定義屬性，該屬性的值就是當(dāng)前video的src，我們?cè)诒O(jiān)聽到某個(gè)視頻元素需要播放時(shí)，我們可以獲取到之前設(shè)置的自定義屬性，然后作為prop傳給VideoItem，當(dāng)VideoItem組件監(jiān)聽到該prop變化時(shí)，并且等于自身的src，此時(shí)則觸發(fā)視頻播放。代碼如下：

// 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(() => { 
        // 當(dāng)當(dāng)當(dāng)前應(yīng)該播放的視頻url等于當(dāng)前視頻組件的src時(shí)，播放視頻 
        if(curPlaySrc === src) { 
            dpRef.current.play() 
        } 
    }, [curPlaySrc]) 
    return <div data-src={src}> 
        <div ref={videoRef}></div> 
    </div> 
} 

此時(shí)視頻列表頁(yè)代碼如下：

// ... 
function VideoList(props) { 
  const [curPlaySrc, setCurPlaySrc] = useState('') 
  useEffect(() => { 
    let observerVideo = new IntersectionObserver( 
        (entries, observer) => { 
            entries.forEach(entry => { 
                // 當(dāng)移入指定區(qū)域內(nèi)后，播放視頻 
                if(entry.intersectionRatio === 1) { 
                    // 設(shè)置當(dāng)前因該播放的視頻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> 
} 

以上步驟即完成了基于指定區(qū)域自動(dòng)播放視頻的功能，效果如下：

體驗(yàn)地址

視頻自動(dòng)播放demo

仿微信朋友圈動(dòng)態(tài)demo

最后

如果想學(xué)習(xí)更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn)，歡迎在公號(hào)《趣談前端》加入我們的技術(shù)群一起學(xué)習(xí)討論，共同探索前端的邊界。