Skip to content

Question: triggering autoplay and fullscreen on initial render #968

Open
@Johannes5

Description

@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.

Activity

realamirhe

realamirhe commented on Oct 3, 2022

@realamirhe
Collaborator

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

Johannes5 commented on Oct 4, 2022

@Johannes5
Author

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

realamirhe commented on Oct 5, 2022

@realamirhe
Collaborator

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

Johannes5 commented on Oct 5, 2022

@Johannes5
Author

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

realamirhe commented on Oct 5, 2022

@realamirhe
Collaborator

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

Johannes5 commented on Oct 5, 2022

@Johannes5
Author

I created an issue for pylr
sampotts/plyr#2537

I've tried setting muted to true like this:
image
(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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Johannes5@realamirhe

        Issue actions

          Question: triggering autoplay and fullscreen on initial render · Issue #968 · chintan9/plyr-react