Hls.js: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

[wuyandefeixue]

Sometimes playing fails in chrome, no problem in ie.

_chrome version:70.0.3538.77
ie version:11.576.14393.0_
Error message:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
When viewing the network, the request is executing.
The log is not pasted completely.

code

if (Hls.isSupported()) {
            var video = document.getElementById("video");
            var hls = new Hls({
                debug: true,
            });
            hls.detachMedia();
            hls.attachMedia(video);
            hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                hls.loadSource('http://192.168.100.108:7086/live/cameraid/1000040%240/substream/1.m3u8');
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                    console.log("manifest loaded, found " + data.levels.length + " quality level");
                    video.play();
                });
            });
}

log

hls.js@latest:1 [log] > trigger BUFFER_RESET
hls.js@latest:1 [log] > manifest loaded,1 level(s) found, first bitrate:undefined
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > switching to level 0
hls.js@latest:1 [log] > main stream:STOPPED->IDLE
hls.js@latest:1 [log] > audio tracks updated
2.html:23 manifest loaded, found 1 quality level
hls.js@latest:1 [log] > subtitle tracks updated
hls.js@latest:1 [log] > live playlist, reload in 1942 ms
hls.js@latest:1 [log] > level 0 loaded [3945,3946],duration:4
hls.js@latest:1 [log] > live playlist - first load, unknown sliding
hls.js@latest:1 [log] > configure startPosition to 0
hls.js@latest:1 [log] > Loading 3945 of [3945 ,3946],level 0, currentTime:0.000,bufferEnd:0.000
hls.js@latest:1 [log] > demuxing in webworker
hls.js@latest:1 [log] > main stream:IDLE->FRAG_LOADING
hls.js@latest:1 [log] > same live playlist, reload twice faster
hls.js@latest:1 [log] > live playlist, reload in 1000 ms
hls.js@latest:1 [log] > level 0 loaded [3945,3946],duration:4
hls.js@latest:1 [log] > live playlist - outdated PTS, unknown sliding
_2.html:24 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
(anonymous) @ 2.html:24
r.emit @ hls.js@latest:1
o.trigger @ hls.js@latest:1
e.onManifestLoaded @ hls.js@latest:1
t.onEventGeneric @ hls.js@latest:1
t.onEvent @ hls.js@latest:1
r.emit @ hls.js@latest:1
o.trigger @ hls.js@latest:1
e._handleTrackOrLevelPlaylist @ hls.js@latest:1
e.loadsuccess @ hls.js@latest:1
t.readystatechange @ hls.js@latest:1
XMLHttpRequest.send (async)
t.loadInternal @ hls.js@latest:1
t.load @ hls.js@latest:1
e.load @ hls.js@latest:1
e.onManifestLoading @ hls.js@latest:1
t.onEventGeneric @ hls.js@latest:1
t.onEvent @ hls.js@latest:1
r.emit @ hls.js@latest:1
o.trigger @ hls.js@latest:1
t.loadSource @ hls.js@latest:1
(anonymous) @ 2.html:21
r.emit @ hls.js@latest:1
o.trigger @ hls.js@latest:1
e.onMediaSourceOpen @ hls.js@latest:1_
hls.js@latest:1 [log] > Loaded 3945 of [3945 ,3946],level 0
hls.js@latest:1 [log] > Parsing 3945 of [3945 ,3946],level 0, cc 0
hls.js@latest:1 [log] > main stream:FRAG_LOADING->PARSING
hls.js@latest:1 [log] > main:discontinuity detected
hls.js@latest:1 [log] > main:switch detected
hls.js@latest:1 [log] > InitPTS for cc: 0 found from video track: 710099100
hls.js@latest:1 [log] > creating sourceBuffer(video/mp4;codecs=avc1.4d002a)
hls.js@latest:1 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.4d002a]
hls.js@latest:1 [log] > Parsed video,PTS:[0.000,2.000],DTS:[0.000/2.000],nb:50,dropped:0
hls.js@latest:1 [log] > main stream:PARSING->PARSED
hls.js@latest:1 [log] > main buffered : [0.000,2.000]
hls.js@latest:1 [log] > latency/loading/parsing/append/kbps:25/80/83/7/44131
hls.js@latest:1 [log] > main stream:PARSED->IDLE
hls.js@latest:1 [log] > Loading 3946 of [3945 ,3946],level 0, currentTime:2.000,bufferEnd:2.000
hls.js@latest:1 [log] > main stream:IDLE->FRAG_LOADING
hls.js@latest:1 [log] > Loaded 3946 of [3945 ,3946],level 0
hls.js@latest:1 [log] > Parsing 3946 of [3945 ,3946],level 0, cc 0
hls.js@latest:1 [log] > main stream:FRAG_LOADING->PARSING
hls.js@latest:1 [log] > Parsed video,PTS:[2.000,4.000],DTS:[2.000/4.000],nb:50,dropped:0
hls.js@latest:1 [log] > main stream:PARSING->PARSED
hls.js@latest:1 [log] > main buffered : [0.000,4.000]
hls.js@latest:1 [log] > latency/loading/parsing/append/kbps:20/99/49/5/51678
hls.js@latest:1 [log] > main stream:PARSED->IDLE
hls.js@latest:1 [log] > Attempt loading level index 0 with URL-id 0
hls.js@latest:1 [log] > same live playlist, reload twice faster
hls.js@latest:1 [log] > live playlist, reload in 1000 ms

[johnBartos]

Hi @wuyandefeixue, It's the responsibility of the library implementing Hls.js to capture user interaction before calling play. Please see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes for more info & how to handle it.

[wuyandefeixue]

@johnBartos thanks,I set video to “muted” , and then I can use it.

[JoeRu]

just for reference about the muted
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

[cis-anand]

There is a good reason for this precaution: Users usually don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio unless the user interacts with them. Yes, I understand that you want to use this feature for good and not evil, but if there was a workaround, that workaround could also be used by the advertisers. So be glad that such a workaround does not exist.

So the only real solution is to find some reason why the player would need to perform some form of interaction after the game HTML document is loaded. A good excuse is some kind of initial screen with a copyright message and other legalese which disappears after the user clicked on it. You can also use this splash screen as a preloader for the assets needed for your login screen. That makes sure the background music is actually loaded when a user with a low bandwidth connection sees it.

You need to handle the error and promise and play sound from javascript, check below and use accordingly:

var audio = new Audio();
audio.src='rest/assets/images/beep.mp3';
// when the sound has been loaded, execute your code
audio.oncanplaythrough = (event) => {
    var playedPromise = audio.play();
    if (playedPromise) {
        playedPromise.catch((e) => {
             console.log(e)
             if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') { 
                   console.log(e.name);
              }
         }).then(() => {
              console.log("playing sound !!!");
         });
     }
}

[findela]

I ran the same snippet of your's no sound is playing in console first catch block run-through and then then() function runs but no sound till. Any help?

I want to play the sound on-load or a after a specific interval time.