Question: triggering autoplay and fullscreen on initial render

[Johannes5]

How would you trigger a video to start playing and triggering fullscreen (as fast as possible), following the initial render of the video component?

The specific flow I have in mind:
user clicks on thumbnail -> a route like /video/youtube/38j9hF378hf opens -> video is playing in fullscreen automatically.

[realamirhe]

Autoplay functionality as deafult is not guaranteed to be safe in cross-browser modes.
If it were I would suggest working with passed props.

Now I suggest using usePlyr and adding useEffect to call a play and fullscreen methods of plyr instance by yourself.

[Johannes5]

is there an ideal time (event) to enable fullscreen?
I've tried it on "ready" and on "canplay", but it doesn't enter fullscreen on safari, firefox, or chromium browsers.

            api.plyr.on("ready", () => {
                console.log("I'm ready")

            })
            api.plyr.on("canplay", () => {
                // NOTE: browser may pause you from doing so:  https://goo.gl/xX8pDD
                api.plyr.play()
                console.log("duration of content is", api.plyr.duration)
                console.log("fullscreen enabled?", api.plyr.fullscreen.enabled)
                api.plyr.fullscreen.enter()
            })
            

note that duration is returning 0 and enabled is returning true

---

autoplay works, when I have it enabled in the browser settings and when the provider is vimeo.
For youtube, it just doesn't

[realamirhe]

As plyr core maintainer said:

It needs to be triggered by a user input/event. Just calling plyr.fullscreen.enter() won't work, it needs to happen in an event binding.

sampotts/plyr#1981

For autoplay, there might be a temp solution that works for your case, but you might need to check these issues:
sampotts/plyr#1185

Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:
https://webkit.org/blog/6784/new-video-policies-for-ios/
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/

[Johannes5]

In a view that only shows a video, I think it makes sense to autoplay and go fullscreen.
Especially on mobile, I want the video (the thumbnail of which has just been clicked in the previous view) to just play on the entire screen in panorama mode.

What could I do besides
api.plyr.play() inside the "canplay" event?

[realamirhe]

Have you tried to set the muted property of the video?
It might be a good option to forward the issue to plyr team, they have more experience in browser-related features.

[Johannes5]

I created an issue for pylr
sampotts/plyr#2537

I've tried setting muted to true like this:

(or just muted={true})

I was pleasantly surprised at first to find that the autoplay suddenly worked after I refreshed again (this time using the Firefox-based Replay browser).
But then I refreshed again and from then on it never autoplayed.

After some time, I refreshed the route on Safari -> it autoplayed (muted still set true)
But I wasn't able to reproduce that -> no autoplay from then on when I refresh.

Also note, that the video was never actually muted 🤷‍♂️

---

And an odd behavior I should have mentioned earlier (not related to the muted value):
It can happen, that the youtube video suddenly starts playing in the background. A few minutes after I last refreshed the page.