play() is pausing

[jamesvclements]

CleanShot.2022-04-13.at.12.26.52.mp4

Trying to add autoplay functionality to videos a Webflow site. The videos should play when in view, pause when out of view.

I have all the intersection observer functionality working, but I can't seem to play the videos using playerjs. Whenever I call play(), the pause event is fired. Could this have to do with the Vimeo sources themselves?

/* utility function to fetch embed URL to uniquely identify players */
const getEmbed = (target) => target.querySelector('iframe.embedly-embed');
const getEmbedSrc = (target) => getEmbed(target).src;

$(document).ready(function () {
    console.log('video-autoplay.js');

    const players = {};
    const options = {
        root: null,
    };
    const autoplayObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            const id = getEmbedSrc(entry.target);
            console.log(id);
            const player = players[id];
            player.on('ready', () => {
                if (entry.isIntersecting) {
                    console.log(`intersecting: ${entry.target.id}`);
                    player.play();
                } else {
                    console.log(`not intersecting: ${entry.target.id}`);
                    player.pause();
                }
            });
        });
    }, options);

    const autoplayTargets = document.querySelectorAll('[data-autoplay=true]');

    autoplayTargets.forEach((target) => {
        const id = getEmbedSrc(target);
        const player = new playerjs.Player(getEmbed(target));
        player.on('play', () => {
            console.log(`playing: ${id}`);
        });
        player.on('pause', () => {
            console.log(`paused: ${id}`);
        });
        players[id] = player;

        autoplayObserver.observe(target);
    });

    console.log('players');
    console.log(players);
    globalThis.players = players;
});

Crossing my fingers this repo is still maintained 🤞 @screeley

[alexeevit]

hey @jamesvclements did you find the way to fix this? It seems that it locks the play() method until user explicitly clicked it. After that it's possible to control the player.

However, it doesn't match the documentation.

I just checked some examples in the docs and they don't work as well. Like Demo here https://docs.embed.ly/reference/playerjs
Maybe it's handled by browser to prohibit autoplaying?

[jamesvclements]

@alexeevit
I can't remember exactly but I think I realized that I could just hook into the Vimeo player directly instead of using Emedly at all:

[alexeevit]

@jamesvclements thanks for your reply! I see, I had the same idea, but this means that we have to access content of the embedly iframe and when I try to do that, the browser raises a DOMException because of accessing a cross-origin frame. I don't think it's possible to just query an element from the iframe with something like document.querySelector('iframe.embedly-embed iframe').

P.S. I'm not really experienced in JS so I may not understand something.

[jamesvclements]

@alexeevit I believe I moved away from using Webflow's native video player, which uses embedly, and instead used the component to use Vimeo's embed code directly. Then I could access the Vimeo player and use the code above. Unfortunately I'm not sure if / how this works for the Embedly player 😅

[alexeevit]

@alexeevit I believe I moved away from using Webflow's native video player, which uses embedly, and instead used the component to use Vimeo's embed code directly. Then I could access the Vimeo player and use the code above. Unfortunately I'm not sure if / how this works for the Embedly player 😅

Well yeah, I had to do the same 🤷‍♀️

Thanks for the help anyway!