NotAllowedError on autoplay when scrolling through list of Video.js components

[juniorforlife]

Description

I am building a vertical short-video feed (TikTok-style) using Svelte 5 and Video.js.

The app follows this logic:

1. All videos start muted.
2. The user interacts with the first video by clicking an "Unmute" button.
3. This sets a global state (isMuted = false).
4. Subsequent videos in the feed use this state to initialize and call .play() unmuted.

This works perfectly on Desktop. However, on Mobile Browsers (eg: iOS Safari), the unmuted autoplay works for approximately 5–10 videos, and then fails. The video stops playing with the following error: Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context.

My simplified code

<script lang="ts">
	import { VolumeX, Play } from "@lucide/svelte";
	import videojs from "video.js";
	import "video.js/dist/video-js.css";
	import { playerState } from "$lib/state/player.svelte";

	let {
		video,
		isActive = false,
		index,
	}: {
		video
		isActive?: boolean;
		index?: number;
	} = $props();

	let playerContainer: HTMLDivElement;
	let player: any = $state(null);
	let playing = $state(isActive);

	function onPlaybackToggle() {
		if (playing) {
			player?.pause();
		} else {
			player?.play();
		}
		playing = !playing;
	}

	$effect(() => {
		if (!document.getElementById(video.id)) {
				const videoElement = document.createElement("video-js");
				videoElement.style.width = "100%";
				videoElement.style.height = "100%";
				videoElement.style.objectFit = "cover";
				videoElement.id = video.id;

				playerContainer.appendChild(videoElement);

				player = videojs(videoElement, {
					muted: true,
					controls: false,
					loop: true,
					playsinline: true,
					preload: "none",
					sources: [{ src: video.hls_url }]
				});
			}
	});

	$effect(() => {
		// When the user unmutes the first video, unmute all videos
		if (!playerState.mute) {
			player?.muted(false);
		}
	});


	$effect(() => {
		if (isActive) {
			playing = true;
			player?.play();
		} else {
			playing = false;
			player?.pause();
		}
	});
</script>

<div
	data-index={index}
	bind:this={playerContainer}
>
	<button class="absolute inset-0 z-10" onclick={onPlaybackToggle}>
		{#if !playing}
		<Play class="h-12 w-12 text-white" />
		{/if}
	</button>

	{#if playerState.mute}
		<button onclick={() => (playerState.mute = false)}>
			Unmute
		</button>
	{/if}
</div>

Reduced test case

https://www.memoreels.app

Steps to reproduce

1. Open the website on mobile Safari/Chrome
2. Unmute the first video
3. Swipe for a while
4. The videos will stop playing and the error appears in Console tab

Errors

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

What version of Video.js are you using?

8.12.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

iOS Safari, Android Chrome

What OS(es) and version(s) does this occur with?

iOS, Android

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[madelyngamble2]

@juniorforlife Let me resolve this issue

[mister-ben]

I'd expect this from iOS Safari. It's very strict about autoplay with sound. You're unmuting the first few videos that are already in the DOM in response to the user click, but Safari doesn't allow the new video elements added to the DOM on scroll to autoplay unmuted without further user interaction. Android Chrome is usually more permissive past the first interaction, and I can't replicate this on that browser/OS, but wherever you are getting a NotAllowedError it's essentially the same thing.

You can't circumvent these browser restrictions simply at the player library level. You'd need to work around it differently, for example instead of adding new players on scroll, re-use the existing players whose video elements are allowed to autoplay with sound. i.e. load a new video into them and reposition them on scroll

[juniorforlife]

@mister-ben I switched to a single video player that’s moved between items as the user swipes, but this makes preloading and performance harder. With only one player, there’s no way to preload the next video, so instant playback like TikTok or YouTube Shorts isn’t achievable.

[dioramayuanito]

https://20.detik.com/flash

And

https://www.cnnindonesia.com/video-vertikal

use video.js + videojs-hlsjs-plugin + hls.js

It works just like TikTok or Instagram

[dioramayuanito]

Basically the problem is Chunk-size. The answers are

1. Should we use LLHLS with Chunk-duration = 0.5 sec per chunk or 1 sec per chunk ?
2. Should we use old HLS with Chunk-duration = 2 sec per chunk ?

And our company decided to use number 2, old HLS Chunk-duration 2 sec per chunk.

[mister-ben]

The plural in "re-use the existing players" was intentional for that reason.