[Request] Hard Paused State

[jcackowskidiagram]

There is a "Hard Playing" state which is described as:

doesn't change on video being paused via IntersectionObserver.

It would be nice if there was also a "Hard Paused" state that did the same thing.

I've noticed that this is more noticeable when you pause a video and switch browser tabs - it causes the video to resume playing when you switch back.

[peterbode1989]

Have the same problem. The creator of this package doesn't give support anymore. That said it's possible to disable the observer since it's registered to the VideoBackgrounds-instance.

Initialize the player as such (just make sure you assign the class to a variable): const ytPlayer = new VideoBackgrounds('[data-vbg]', {});

You can do this to unregister the observer: ytPlayer.intersectionObserver.disconnect()

I'm currently working on code that enabled hard-pause state (with the observer as source). So basically I'm replacing the default observer with mine.

[peterbode1989]

This my entire code, as you can see it makes a new observer and checks if autoplay is enabled. So basically when you use a player that has autostart disabled you won't be observing the players.

let videos, ytObserver; 

const youtube = class youtubeClass {
    selector = '[data-vbg]'

    constructor() {
        let _ = this
        window.addEventListener("load", e => _.onLoad())
    }

    createObserver() {
        if (!ytObserver) {
            ytObserver = new IntersectionObserver(entries => {
                entries.forEach(function (entry) {
                    let player = videos.get(entry.target)
                    if (entry.isIntersecting) {
                        player.isIntersecting = true
                        try {
                            if (player.currentState != 'playing')
                                player.softPlay()
                        } catch (e) { }
                    } else {
                        player.isIntersecting = false
                        try {
                            player.softPause()
                        } catch (e) { }
                    }
                })
            })
        }
    }

    observe(nodes) {
        let _ = this
        if ('IntersectionObserver' in window) {

            // Create the actual IntersectionObserver
            _.createObserver();

            // Loop the nodes/players
            [].forEach.call(nodes, function (node, index, arr) {
                if (node.getAttribute('data-vbg-autoplay') == "true") {
                    ytObserver.observe(node)
                }
            })
        }
    }

    onLoad() {
        let _ = this,
            nodes = document.querySelectorAll(_.selector)

        if (nodes.length > 0) {
            (async () => {
                // Load the base module
                await import('youtube-background').then(module => {
                    setTimeout(() => {
                        // Initiate the instance
                        videos = new VideoBackgrounds(nodes, {
                            'lazyloading': true
                        });
                        // Disconnect the default observer
                        videos.intersectionObserver.disconnect()
                        // Enable intersectionObserver for nodes
                        _.observe(nodes)
                    }, 1000)
                })
            })();
        }
    }
}

export default new youtube();

[derogit]

This my entire code, as you can see it makes a new observer and checks if autoplay is enabled. So basically when you use a player that has autostart disabled you won't be observing the players.

Thx. it's work