@plupyt/mediaplayer/src/plugins/AutoPause.ts

Reproductor de video

import MediaPlayer from "../MediaPlayer"

class AutoPause {
    private threshold: number
    player: MediaPlayer

    constructor() {
        this.threshold = 0.25
        this.handleIntersection = this.handleIntersection.bind(this)
        this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
    }

    run (player) {
        this.player = player

        const observer = new IntersectionObserver(this.handleIntersection, {
            threshold: this.threshold
        })

        observer.observe(player.media)

        document.addEventListener("visibilitychange", this.handleVisibilityChange)
    }

    private handleIntersection(entries: IntersectionObserverEntry[]) {
        const entry = entries[0]

        const isVisible = entry.intersectionRatio >= this.threshold
        
        if(isVisible) {
            this.player.play()
        } else {
            this.player.pause()
        }
    }

    private handleVisibilityChange() {
        const isVisible = document.visibilityState === "visible"
        if(isVisible) {
            this.player.play()
        } else {
            this.player.pause()
        }
    }
}

export default AutoPause