Question: triggering autoplay and fullscreen on initial render
Johannes5 opened this issue · comments
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.
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.
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
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.
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/
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?
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.
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.