Hls.js: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

[sompylasar]

The exception is thrown from the src assignment here:
https://github.com/dailymotion/hls.js/blob/443f6f840798e2cfc92a5577ff971f5edece8afe/src/controller/buffer-controller.js#L67

  onMediaDetaching() {
      // ...
      // unlink MediaSource from video tag
      this.media.src = '';

Regardless of being labeled as (in promise), the exception happens synchronously during the public API calls of detachMedia(), as well as in recoverMediaError() and destroy() which both call detachMedia() internally.

I think a try..catch like the one above that code won't hurt.

[redannick]

I'm still seeing the error even with the try catch here. Not every time it's called though.

[dananichev]

Same here

[mangui]

Hi @redannick @dananichev
do you mean the exception is not catched ?
do you have logs, backtrace ?

[proxy-m]

Only in Google Chrome:

"buffer-controller.js:76 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request."
:
try {
// unlink MediaSource from video tag

this.media.src = '';<<<<
this.media.removeAttribute('src');
} catch(err) {
logger.warn(onMediaDetaching:${err.message} while unlinking video.src);
}

hls.js version: https://github.com/dailymotion/hls.js/releases/tag/v0.5.41

P.S.:
But I do some interesting things:

---

                $(video).on("loadstart", function () {
                    console.log("LOADSTART 1: ");
                    setTimeout( function() {
                        video.play();
                    }, 1);
                });

---

             $(video).on("pause", function (e) {
                    console.log('pauseAllowed:'+pauseAllowed);
                    console.log('isArchive:'+isArchive);
                    if (!pauseAllowed && !isArchive) {
                        console.log("YOU CAN'T PAUSE: ");
                        e.preventDefault();
                        setTimeout( function() {
                            ///video.load();
                            video.play();
                        }, 1);
                    } else {
                        pauseAllowed = false;
                        $('#'+idPlayPause).html(playStr);
                    }
                });

---

[sompylasar]

@proxy-m @mangui Looks like this exception cannot be ever caught, regardless of try..catch.

[sompylasar]

The exception could be caught by handling the promise returned from the .play() call (note that not every browser returns a promise there). But I haven't confirmed that yet.

[dighan]

Indeed (more details here). Something like this should do the trick:

const playPromise = media.play()

if (playPromise !== null) {
  playPromise.catch(() => { /* discard runtime error */ })
}

It will be fixed in a coming PR.

[sompylasar]

@dighan Good link. I'd check for the catch method in the returned object to be a function, the strict comparison with null is not safe enough to be cross-platform, the method may return anything.

[sompylasar]

@dighan And I wouldn't discard the error, rather it should be properly handled, and the relevant hls.js event should be triggered depending on the type of the caught error.

[blacktrash]

@dighan, @sompylasar - FYI in a somewhat different scenario: https://github.com/flowplayer/flowplayer/commit/ad49f211bd4219bfa584e851ba71c04746c0243b

[ThiagoMiranda]

I'm experiencing the same issue but in my case it only happens on my minified js file. Does this make any sense?

The error object:

{"type":"otherError",
"details":"internalException",
"fatal":false,"event":"hlsFragLoaded",
"err":{"message":"Uncaught ReferenceError: _0xd0ac is not defined (blob:http://playerapitest2.liquidplatform.com:7091/9b700624-eee0-4dc2-ba1c-5c38e497af02:1)"}}

[tbela99]

Here is an explanation of the error https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
The mediaElement.play() method returns a promise that is rejected

[notanewbie]

I don't know if this is the case for you guys, but for me, the error seems to be inconsistent. For some stream URLs, my player plays the stream just fine, but in others, this exception is thrown.

Not working: http://notanewbie.com/hls-live-player/v2.html?quality=1080&volume=5&fancy=yes&url=http://cbslocalhls-i.akamaihd.net/hls/live/219778/WJZFM-IOS/wjzfmlive.m3u8

Working: http://notanewbie.com/hls-live-player/v2.html?quality=1080&volume=5&fancy=yes&url=https://cbssportsdc-i.akamaihd.net/hls/live/518856/dc_1/desktop.m3u8

[sompylasar]

@notanewbie Both links show the promise rejection for me in Chrome Version 65.0.3325.162 (Official Build) (64-bit):

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://goo.gl/LdLk22

That the first (wjzfmlive.m3u8) stream does not play is not relevant to the rejection. See Chrome DevTools Network tab in the developer tools to see what the player downloads: both .m3u8 playlists and segments .ts are different, compare them to find out what differs, try downloading and playing the segments individually via VLC.

[notanewbie]

Cool, thanks @sompylasar. I was only looking at the Network tab when the video wouldn't play.

Quick follow up, the stream is actually broadcasting a black screen with no sound.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.