Video.js: Unhandled Promise Rejection in Safari

[calvincorreli]

Description

I don't know if this is significant, but I thought I'd report it, so at least others can find it. I haven't been able to find any other reports on this. It does not seem to impact playback or other functionality.

It only seems to happen in Safari (Version 11.0.2 (13604.4.7.1.3)), and it happens in VideoJS 6.5.0.

Here's a JSbin: http://jsbin.com/qukoyidare/1/edit?html,output

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Go to the JSBin: http://jsbin.com/qukoyidare/1/edit?html,output

2. Open the javascript consoe

3. Reload the page (just so we get everything in the console)

4. Click play

5. Click around in the progress bar a few times until you see the error appear. For me typically 1-3 clicks are enough.

Results

Expected

No videojs-related notices in the console.

Actual

Here's what it looks like for me:

Here's a video of it, since it involves user interaction:

http://cloud.smpl.ro/0O2m210b3a3G

I have tested in Firefox and Chrome, and not been able to replicate the problem.

I have seen the same issue with HLS sources.

[misteroneill]

Interesting, I don't think I've seen this before in Safari. That said, these Unhandled Promise Rejections are usually harmless and can be ignored. It does seem that seeking a lot causes it, so maybe we could make sure we silence the play promise anywhere we call play() in Video.js.

[gkatsev]

Oh, that's really weird but could be related to how seeking works in Video.js. I can reproduce this locally. Thankfully, this is something that can be safely ignored and hopefully, we'll be able to silence this if my hunch is correct.
Also, it's always pretty amusing when someone submits a video showcasing video.js related issues that plays using video.js :)

[gkatsev]

I have no idea why but this call to play is having its promise rejected in safari.
https://github.com/videojs/video.js/blob/4d88b61c074f324855463469edf2b2728cbd4a1c/src/js/control-bar/progress-control/seek-bar.js#L256-L258

@calvincorreli would you be open to submitting a PR wrapping that call to play() with a call to our silencePromise helper?

[calvincorreli]

@gkatsev let me have a go at it!

[calvincorreli]

Done: https://github.com/videojs/video.js/pull/4860

[gkatsev]

Looks like this is being fixed in Safari Tech preview 47: https://webkit.org/blog/8060/release-notes-for-safari-technology-preview-47/

[calvincorreli]

Very cool! Glad to see they're catching things over there.

[hktalent]

@calvincorreli

// fix: Uncaught (in promise) DOMException,Unhandled Promise Rejection: AbortError: The operation was aborted.
// https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

[jesserosenfield]

This solved my problem.

In my example, I wait for this event "$(document).trigger('vidsloaded');" before doing anything with play(), pause() etc...

                var aboutVidsLength = $aboutvids.length;

        $aboutvids.each(function(index){
            var $me = $(this),
                myreq = index + 1,
                myVidSrc = $me.find('.vide-bg-wrap').attr('data-vide-bg');

            window.aboutvid[myreq] = new XMLHttpRequest();

            window.aboutvid[myreq].open('GET', myVidSrc, true);
            window.aboutvid[myreq].responseType = 'blob';

            window.aboutvid[myreq].onload = function(i) {
                // Onload is triggered even on 404
                // so we need to check the status code
                if (this.status == 200) {
                    window.loadedAboutVid = window.loadedAboutVid + 1;

                    if(window.loadedAboutVid == aboutVidsLength) {
                        $(document).trigger('vidsloaded');
                    } 
                }
            }

            window.aboutvid[myreq].send();
        });

This is also extremely helpful:

            if(typeof thevid !== 'undefined' && thevid !== null) {
                const playPromise = thevid.play();
                if (playPromise !== null) {
                    playPromise.then(function(_) {                              
                    });

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

[ChR-iSz]

Looks like the issue still exist.

autoplay will ignored. And xxxx.play() in $(document).ready(function) doesn't work.

i use new bootstrap 4.0. Strange are... in Bootstrap 3 (my 3 years old environment) it will work, and i haven't this error message... I try 6 hours now to fix, but now i have no more idea...

[shun-ichikawa]

@IosXcodeDeveloper
Same here...

[Sbphillips19]

Anyone have any updates to fix this issue? Still seeing this happen in safari in 13.1 and 13.11 on our sentry error logging.