Seekable regions get randomly updated to values very close to the live hls playlist edge #8760

pawelpredki · 2024-06-07T14:00:22Z

pawelpredki
Jun 7, 2024

We're using vjs version 7.20.3 and we keep running into a strange issue. For live HLS playlist that contain multiple audio streams and multiple vbr video streams when the player loads the seekable region gets restricted to the very edge of the live playlist and it is impossible to seek back into the video.

#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="",NAME="Audio track 1",DEFAULT=YES,AUTOSELECT=YES,URI="a0.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="",NAME="Audio track 2",DEFAULT=NO,AUTOSELECT=YES,URI="a1.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,RESOLUTION=640x360,BANDWIDTH=1500000,CODECS="avc1.4d4020,mp4a.40.2",AUDIO="audio"
hi.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,RESOLUTION=1920x1080,BANDWIDTH=10000000,CODECS="avc1.4d402a,mp4a.40.2",AUDIO="audio"
fhd.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,RESOLUTION=1280x720,BANDWIDTH=4000000,CODECS="avc1.4d402a,mp4a.40.2",AUDIO="audio"
hd.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,RESOLUTION=480x270,BANDWIDTH=700000,CODECS="avc1.4d4020,mp4a.40.2",AUDIO="audio"
med.m3u8

Our playlists are live but they contain all the chunks going back to the very beginning of the stream:

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:1
#EXTINF:1.0,
fhd/000000.ts
#EXTINF:1.002667,
fhd/000001.ts
#EXTINF:1.0,
fhd/000002.ts
...
#EXTINF:1.024,
fhd/013088.ts
#EXTINF:0.992,
fhd/013089.ts
#EXTINF:0.992,
fhd/013090.ts
#EXTINF:0.992,
fhd/013091.ts

We registered event listeners to debug this :

vm.videoPlayer.videojs.on("timeupdate", logEvent("timeupdate", vm.videoPlayerTimeUpdate));

...

function logEvent(eventName, fn) {
	return function (args) {
		console.log("time debug: ", vm.videoPlayer.videojs.currentTime());
		seekable = vm.videoPlayer.videojs.seekable();
		console.log("LOG EVENT", "SEEKABLE START", seekable.start(0), "SEEKABLE END", seekable.end(0), "ALL", seekable);
		if ($scope.DEBUG_MODE)
			console.log(
				"%cDEBUG (event):",
				"background: orange; color: yellow",
				eventName,
				args
			);
		if (fn) fn();
	};
}

And what we noticed in the SEEKABLE START and SEEKABLE END values is this:

LOG EVENT SEEKABLE START 0 SEEKABLE END 13725.179940001151 
LOG EVENT SEEKABLE START 13732.994667 SEEKABLE END 13728.179940001151
LOG EVENT SEEKABLE START 13732.994667 SEEKABLE END 13728.179940001151
 LOG EVENT SEEKABLE START 13732.994667 SEEKABLE END 13728.179940001151

Initially the entire region is available but after a second it changes to an impossible region, where start > end. We got stuck trying to debug where those regions are set and when they are updated.

As far as we can tell this only happens for multiaudio playlist when they are live. Once the end marker is in the playlist or if the audio is not separate from the video this problem doesn't occur.

pawelpredki · 2024-06-10T14:12:52Z

pawelpredki
Jun 10, 2024
Author

We were able to isolate the problem outside our application and as far as we can tell it appears for the latest vjs version as well.

HTML:

<script src=https://github.com/videojs/video.js/discussions/"./vjs.js"> <div> <input type="text" id="time"></input> <button onclick="seek()">seek</button> <button onclick="pause()">pause</button> <button onclick="play()">play</button> </div> <div> <div id="currentTime"></div> <div id="startRange"></div> <div id="endRange"></div> </div> </body> ">

<head>
  <link href="https://vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">
 
</head>

<body>
  <video id="example-video" preload width="600" height="360" class="video-js vjs-default-skin" controls>
  <source
	 src=add your live playlist here>
</video>
  <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
  <!-- <script src="./video.min.js"></script> -->
  <script src="./vjs.js"></script>
  
<div>
  <input type="text" id="time"></input>  
  <button onclick="seek()">seek</button>
  <button onclick="pause()">pause</button>
  <button onclick="play()">play</button>
</div>

<div>
  <div id="currentTime"></div>
  <div id="startRange"></div>
  <div id="endRange"></div>
</div>

  
</body>

JS:

const urlParams = new URLSearchParams(window.location.search);
const includeHtml5Settings = urlParams.get('html5');

var vjsParams = {
	muted: false,
	controls: true,
	autoplay: true,
	liveui: true	
};

if (includeHtml5Settings) {
	vjsParams.html5 = 
	{
		vhs: {
		  overrideNative: false,
		  limitRenditionByPlayerDimensions: false
		}
	}
};

console.log(vjsParams);

var player = videojs('example-video',vjsParams,function(e){
});

function seek() {
	const input = document.getElementById("time");
	const inputValue = input.value;
	
	player.currentTime(inputValue);
};

function pause() {
	player.pause();
}

function play() {
	player.play();
}

function logEvent(eventName, fn) {
	return function (args) {
		console.log("time debug: ", player.currentTime());
		document.getElementById( 'currentTime' ).innerHTML = "time: " + player.currentTime();
		seekable = player.seekable();
		if (seekable && seekable.start && seekable.start.length > 0) {
			console.log("LOG EVENT", "SEEKABLE START", seekable.start(0), "SEEKABLE END", seekable.end(0), "ALL", seekable);
			document.getElementById( 'startRange' ).innerHTML = "range start: " + seekable.start(0);
			document.getElementById( 'endRange' ).innerHTML = "range end: " + seekable.end(0);

		}
		console.log(
				"%cDEBUG (event):",
				"background: orange; color: yellow",
				eventName,
				args
			);
		if (fn) fn();
	};
};						

player.on("timeupdate", logEvent("timeupdate"));
player.on("play", logEvent("play"));
player.on("playing", logEvent("playing"));
player.on("seeked", logEvent("seeked"));
player.on("pause", logEvent("pause"));
player.on("loadedmetadata",	logEvent("loadedmetadata"));
player.on("loadeddata", logEvent("loadeddata"));
player.on("error", logEvent("error"));
player.on("progress", logEvent("progress"));

The problem seems to be with the html5 settings, we're guessing overrideNative. With this enabled, the issue with the 'shrinking' seekable regions is reproducible with 90% 'success rate'. Without it it doesn't.

We did the same with version 7.20.3 and with out forked version with some small changes in it.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Seekable regions get randomly updated to values very close to the live hls playlist edge #8760

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Seekable regions get randomly updated to values very close to the live hls playlist edge #8760

pawelpredki Jun 7, 2024

Replies: 1 comment

pawelpredki Jun 10, 2024 Author

pawelpredki
Jun 7, 2024

pawelpredki
Jun 10, 2024
Author