Videos no longer streaming with mediaelement.js in Chrome

Question

Over the past few days, we noticed that our videos quit streaming using MediaElement.js Version 2.11.3 and Chrome Version 50.0.2661.94 (64-bit)

Videos still play in Firefox and Safari without a problem.

The error we receive in the Chrome Dev Tools is:

Uncaught (in promise) DOMException: The element has no supported sources.

The markup on the rendered page looks like this:

<video height="150" poster="https://xxxxxxxxxx.cloudfront.net/123423_1_thumb.jpg" preload="auto" width="200" src="" hidden-source="https://xxxxxxx.cloudfront.net/123423_1_wm.webm">
  <object data="flashmediaelement.swf" height="150" type="application/x-shockwave-flash" width="200">
  <param name="movie" value="flashmediaelement.swf">
  <param name="flashvars" value="controls=true&amp;file=http://s38zby1czkz3d7.cloudfront.net/123423_1_wm.mp4">
  </object>
</video>

Here are some images of the errors to make it a little more clear:

Here are the error messages in the console:

Answer 1

That is because since Chrome 50 a play() call on a <video> or an <audio> element returns a Promise. If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure.

You can find some examples and more information here: https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en

Answer 2

I could replicate this problem with Chromium 51. However it appears this problem does not occur anymore with Chrome 53.

Unfortunately I have been unable to find an easily readable confirmation on the Internet, that this was a confirmed bug for Chromium/Chrome that got fixed, but just indications that several people reported issues with Chrome/Chromium versions. e.g. here Videos no longer streaming with mediaelement.js in Chrome where Google Chrome Developer cwilso points to this internal chromium mailing list, but whose contents are rather cryptic without further research. It appears to be related to a switch called ENABLE_BROWSER_CDMS and the EME implementation for DRM support, that was not working as it was supposed to. https://groups.google.com/a/chromium.org/forum/#!topic/chromium-reviews/Qi4dLcKjcCM

Answer 3

It also can be a CORS issue. Set media.crossOrigin = 'anonymous'; And make sure that the server response has the header Access-Control-Allow-Origin: *. Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server.