How to autoplay a video or audio without the user interacting with the page?
I have a music player built using Filament, it’s a custom page inside the admin panel.
The issue is: when the page first loads, I want the music to start playing automatically, but it doesn’t, because the browser blocks autoplay until the user interacts with the page.
However, I’ve noticed that YouTube videos start playing automatically as soon as the page loads, even before I interact with anything. So it seems like it should be possible somehow.
Do you have any ideas on how to debug this or make it work like YouTube does?
8 Replies
I think the only way you can do autoplay without interaction is to make it muted by default. It’s an accessibility concern. https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay
MDN Web Docs
Autoplay guide for media and Web Audio APIs - Media | MDN
Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. In thi...
hmm ye, but the thing is, then, if is muted, how to unmute it? 🤔
You can't unmute it, that's the browsers restriction because people haven't asked for audio you can't auto-play it. This came from the old days when everyone was randomly adding .mp3's to websites and all of a sudded people were being shocked with random tabs playing music.
This came from the old days when everyone was randomly adding .mp3's to websites and all of a sudded people were being shocked with random tabs playing musicyeah hahah good old days ^^
You can't unmute iti think it should be some sort of permission for that, like, 1st time ok, but next times if user agrees, i think would be no problem to autoplay audio on page load 🙁
Yeah people just build apps to avoid that unique scenario though. But feel free to try and update the web standards to support that approach 😉
But feel free to try and update the web standards to support that approachyeaaah but how to do this? i just feel developing native apps is a pain deploying paying store stuff buffff but for things like this scenario, i might wanna create a native app idk
exactly, you could just use NativePHP to do that.
yeah its been spinning in my head, ill might give it a try, seems cool, but too young, not sure how stable it is