CODEWITHSUNDEEP
javascriptsafarivideo-streamingmedia-sourcebitrate
arcman77
arcman77

Reputation: 51

Issue starting playback with high variable bitrate video using the Media Source Extension API

Question: What is causing the video playback to get stuck indefinitely?

I'm using Safari.

I have a video file that has a rather high bitrate:

10596496 bits/second

I suspect that the bitrate is varying a lot throughout the duration (4 minutes and 7 seconds) of the video.

The mime-type codec string being used is:

"video/mp4; codecs=\"avc1.4d0028, mp4a.40.2\""

My issue is that when seeking or starting the stream at certain regions in the file it results in the html5 video player stalling indefinitely.

The server that I'm using serves the file as a live stream rather than with ranged byte requests.

NOTE: This means that when seeking to a certain time in the file, a new live stream is started (I tear down the old media source extension object along with its source buffer) I create a new media source object and then add a new source buffer using the same mime-type codec string. Basically, seeking is like starting a fresh playback session.

I have tried ensuring that the media source is closed once the last of the video file chunks have been appended to the source buffer.

I have tried emptying the video player and then reloading it before and after each new request when seeking:

videoPlayer = document.getElementsByTagName('video')[0];
videoPlayer.src = '';
videoPlayer.load();
videoPlayer.src = URL.createObjectURL(myMediaSource);
videoPlayer.load();

I have added event listeners on the native html5 video player that log all events.

If I arbitrarily seek to a point in the file that has successful playback I see the following console logs:

[Log] EMPTIED (bundle.js, line 7131)
[Log] PLAY (bundle.js, line 7131)
[Log] WAITING (bundle.js, line 7131)
[Log] LOADSTART (bundle.js, line 7131)
[Log] LOADEDMETADATA (bundle.js, line 7131)
[Log] LOADEDDATA (bundle.js, line 7131)
[Log] CANPLAY (bundle.js, line 7131)
[Log] PLAYING (bundle.js, line 7131)
[Log] CANPLAYTHROUGH (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] RESULT.DONE (bundle.js, line 75634)
[Log] PROGRESS (bundle.js, line 7131)
[Log] STALLED (bundle.js, line 7131)

If I arbitrarily seek to a point in the file that does NOT successfully start playback I see the following console logs:

[Log] EMPTIED (bundle.js, line 7131)
[Log] PLAY (bundle.js, line 7131)
[Log] WAITING (bundle.js, line 7131)
[Log] LOADSTART (bundle.js, line 7131)
[Log] LOADEDMETADATA (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] RESULT.DONE (bundle.js, line 75634)
[Log] PROGRESS (bundle.js, line 7131)
[Log] STALLED (bundle.js, line 7131)

I can see in the network tab that on each seek, the fetch request being made to the backend does indeed receive data (up to 100 MB - I capped it to stop at 100 MB so that the source buffer doesn't run out of memory). As you can see from the logs the html5 video player does indeed recognize that's receiving data, but in some cases, it does not believe it has enough to begin playback.

Furthermore I can see that the video player is buffering a significant portion of the video after emitting the progress events, and yet it still gets stuck:

videoPlayer.buffered.end(0)
145.22842222222224

What is causing the video playback to get stuck indefinitely?

Upvotes: 2

Views: 417

Answers (1)

arcman77
arcman77

Reputation: 51

I believe I have found the cause and a viable workaround.

As I mentioned in the cases where the player hangs indefinitely without starting playback, the videoPlayer.buffered.end(0) call will return some reasonable value such as 145.22842222222224. However, in these cases, the buffered start time seems to consistently be set at 0.08342222222222222.

So we have:

videoPlayer.buffered.start(0) // returns 0.08342222222222222
videoPlayer.buffered.end(0)   // returns 145.22842222222224
videoPlayer.currentTime // returns 0

This tricks the safari video player into believing it does not have enough data to begin playback as the video player's current time does not fall within the range of the buffered start and buffered end times. I can fix this merely by setting the video player's current time to something within that range, for example:

videoPlayer.currentTime = 0.9;
videoPlayer.play();

This is actually enough to fix the issue in my case and allow video playback to begin.

Upvotes: 0

Related Questions