Very weird problem I'm running into.

I have a html video in my application which seems pretty standard. In Chrome however, seemingly at random, sometimes it plays fine and sometimes it just stays dark and doesn't play or seem to load. No matter what I do, nothing will work or get me closer to finding the cause.

In Edge and Firefox the video works fine 100% of the time.

I get no console errors

In the Network tab, I sometimes don't see the video loading (presuming it's still in cache), sometimes I get a 206 status code and sometimes a 304 status code. However, none of this seem to be relevant to the problem as playing the video still randomly happens.

I tried reconverting it as I thought it could have been a codec problem, but that doesn't do the trick either.

Live demo can be seen here

The html is pretty straightforward:

<video class="ggmedia" id="video_14_1" pan="1.59" tilt="-0.2" crossorigin="anonymous" webkit-playsinline="webkit-playsinline" controls="controls" playsinline="playsinline" width="1920" height="1080">
     <source src="media/4DX_NL.mp4" type="video/mp4">
</video>

I play the video dynamically with javascript by using the following code:

try {
    video.play();
    video.removeAttribute('is-autoplay');
    clearInterval(autoPlayVideosInterval[index]);
} catch(err) {
    console.log(err);
}

As you might have guessed, the console never shows any errors.

Edit: I have posted the output of my chrome://media-internals as well, it is the same in both cases (when working and when not). The peculiar part is that it always (when working and when not) creates 2 instances of a webmediaplayer. Might this be the problem? And what can cause it? I only create the video once, so I have no idea. media-internals

0 Answers