Automatic Video Playback on Websites – Best Configuration Options
source: Image by rawpixel.com on Freepik | automatic video playback
Automatic Video Playback on Websites – Best Configuration Options
Automatic video playback on websites is often used to capture user attention, but its implementation faces restrictions due to browser policies and user preferences. In this article, we present possible options for enabling video playback as soon as the page loads, without requiring user interaction, while taking the latest guidelines and workarounds into account.
Common Issue: “Uncaught (in promise) NotAllowedError”
One of the most frequent problems associated with automatic video playback is the “Uncaught (in promise) NotAllowedError” message, which occurs when the browser blocks the video playback attempt unless the user has interacted with the content. Since the primary purpose of including video content on a website is to grab user attention, you want the content to play right away.
Here are ways to bypass this issue:
1. Using a combination of `autoplay` and `muted`
The simplest and most reliable solution is to use the `autoplay` and `muted` attributes for `<video>` elements. Most modern browsers allow automatic video playback if the video is played without sound. Example implementation:
“`html
<video autoplay muted>
<source src=”example.mp4″ type=”video/mp4″>
</video>
“`
This configuration meets browser requirements, which block autoplay with sound unless user interaction occurs.
source: Image by StockSnap from Pixabay
2. Adjusting for Google Chrome’s Media Engagement Index (MEI) policy
Chrome utilizes a Media Engagement Index (MEI) that determines if a user regularly watches video content on a particular site. Sites with a high MEI may automatically play video, even if it has sound. For creators, this means that improving user engagement and regularly playing multimedia increases the chance of successful autoplay with sound.
3. Dynamic Attribute Changes
You can use JavaScript scripts to dynamically change the `muted` and `autoplay` attributes based on user interaction with the site. If the user clicks on a specific page element or scrolls the page, you can remove the `muted` attribute to enable sound.
source: Image by rawpixel.com on Freepik
Other Solutions: Using APIs and Libraries for Automation
In addition to native HTML solutions, you can apply APIs or JavaScript libraries to better control autoplay:
1. Intersection Observer API
You can detect when a video comes into the user’s viewport and automatically start playing it. This avoids issues related to the lack of user interaction while also increasing the chances of a smoother content experience. This approach can be more user-friendly than instant video playback.
2. Iframe Handling
If a video is embedded using `<iframe>`, make sure it includes the `allow=”autoplay”` attribute. Without it, browsers may block autoplay:
“`html
<iframe src=”example_video_player” allow=”autoplay; fullscreen”></iframe>
“`
source: Image by DC Studio on Freepik
The Proper Solution – What to Focus On?
Firstly, it is worth keeping in mind that browsers dynamically adapt their policies related to automatic playback to improve user comfort and limit unwanted multimedia content. To meet user expectations, it is best to implement autoplay without sound and provide an option for manual sound activation. Also, consider actions that increase user engagement to achieve better results in terms of autoplay with sound (MEI).
When addressing the issue of automatic video playback, it is crucial to follow current browser guidelines and tailor playback methods to user behavior and preferences.
