9

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:

enter image description here

Here are the error messages in the console:

enter image description here

Randy Burgess
  • 4,835
  • 6
  • 41
  • 59
  • 1
    Same Issue here with Chrome 51.0.2704.81 on Samsung Galaxy Tab 4 – svassr Jun 09 '16 at 00:54
  • For what it's worth, I encountered this error when dealing with mixed http/https audio sources. My page was https, but my resource was served http. Serving both the resource and the page under https fixed this error. I see there is a http served mp4 file in your code, so that could be the problem? – Tennyson H Aug 17 '16 at 00:31
  • It is a CORS issue. See my answer here: http://stackoverflow.com/a/43434754/625745 – Michael Franzl Apr 16 '17 at 07:19

3 Answers3

5

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

Community
  • 1
  • 1
Pat Mächler
  • 529
  • 4
  • 14
  • 1
    Deepak, this clearly answers the question. In Chromium 50/51, media element is broken. Since Chromium 52, the problem is fixed, and the code above works. – viskin Oct 08 '16 at 12:36
  • Thank you viskin. Deepak: I tried to extend my answer with hints of what I know about the issue at hand. As I was unable to find an official, easily understandable bug confirmation by the Chromium team and had rather anecdotal data that would intuitively support the notion that media element was broken in versions 50/51, I was a bit defensive when phrasing my reply first here. And, yes, I would have indeed preferred a comment instead of having to post a reply, but it's not my fault that I was unable to do that. – Pat Mächler Oct 10 '16 at 05:39
  • I still get this error in Chrome 55. It seems to be a standard error, if the browser can't make sense of the file. – VectorVortec Dec 13 '16 at 06:38
4

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

gugaiz
  • 534
  • 4
  • 12
  • 1
    Interesting information. Sadly, I don't think it somehow relevant to the error. Answer below provides exact info about source of the problem, which is bug in Chromium 50, and not API change. – viskin Oct 08 '16 at 12:39
0

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.

Michael Franzl
  • 1,341
  • 14
  • 19