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&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:
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
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
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.
Related
My mp4 videos are not loading in safari for some reason, in every other browser the html5 player works absolutely fine, but in safari it doesn't. This is for a clients website i'm helping with.
I must stress, i cant host these videos on a different server or video hosting platform. does anyone know how i can this to work.
http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4
my code for the player :
<video class="eltdf-self-hosted-video" controls="true" preload="auto">
<source type="video/mp4" src="http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4">
</video>
You server appears to be not set up to handle range requests properly.
Some browsers will ignore this and simply handle the full video being downloaded, but Safari seems to not play the video in this case - unfortunately the error message in the console is not that helpful.
You can check this by doing a range request test - Apple explain the approach here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request. If it downloads the entire file, you may need to update the media server.
Doing this for your video confirms that the server is downloading the full video rather than just the range requested:
It may be worth contacting your hosting provider to ask them to correct the server configuration.
I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.
<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>
Get fom VLC codec informations:
video h.264/mpeg-4 avc
audio mpeg aac audio mp4a
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Another possible solution for you future searchers: (If your problem is not a mimetype issue.)
For some reason videos would not play on iPad unless i set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
If you haven’t solved the problem yet then go to your phone setting then choose safari and tap Clear History and Website Data, that worked for me the problem wasn’t the code but safari itself.
Here is the configuration of system I am using
Ubuntu : 12.04
Mozilla Firefox : 26.0
I have a mp4 file, when I open it directly in browser like
http://localhost/MyProject/web/video/samples/A001C026_140418WK.mp4
It runs in browser properly, but when I try the same file to render through html5 video, it is not getting played and shows below error.
No video with supported format and MIME type found.
I know this question is appeared many times but I did not get the clear way to kick this problem, second thing this file is getting played properly using <embed> tag.
Video tag syntax
<video width="854" height="480" controls>
<source src="{{asset('video/samples/A001C026_140418WK.mp4')}}" type="video/mp4">
Your browser does not support the video tag.
</video>
path specified is correct, I have checked properly.
Please guide, where the things are going wrong or missing.
Thanks in advance.
Your problem seems to rely in the fact your mime types are not properly configured server side. Have a look here for set up steps. Make sure you restart/reload your web server for changes to be taken into account
After you have checked that it should work in a HTML5 video tag.
For MP4 H264/AAC to work with Firefox on Linux you need to have GStreamer codecs being installed. But I guess you have that covered. You can find more information in this article section notes.
You can check this question for further troubleshooting steps.
We run an IIS 7 server hosting a site that plays short 10-20 second MP3's. The code we use for our player is:
<audio autoplay="autoplay" controls id="audio_player" preload="auto" >
<source id="mp3_src" src="path_to_mp3/clip.mp3" type="audio/mpeg">
<source id="ogg_src" src="path_to_ogg/clip.ogg" type="audio/ogg">
<!-- BEGIN fallback -->
<object type="application/x-shockwave-flash" data="/flash_mp3_player.swf" width="340" height="50">
<param name="movie" value="/flash_mp3_player.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="filename=path_to_mp3/clip.mp3;autostart=true" />
<embed href="html5-mp3player.swf" width="340" height="50" name="player" align="" type="application/x-shockwave-flash" flashvars="filename=path_to_mp3/clip.mp3;autostart=true"/>
</object>
<!-- END fallback -->
For most users, this is not an issue. We serve and play about 50 clips every few minutes, and have users on almost every major platform that you'd expect (Win XP-8, OS X 10.4+, iOS 5+, Android 2+, etc.).
Recently, as our work load has increased, we're seeing a large number of people who say the clips aren't playing for them. Most of the time we hear of no specific error, but when we do, it's almost always IE9+ reporting "Error: Unknown file type or invalid file path".
At this point, we're stumped. The IIS box is not struggling physically, and this site is the only one on it. Below are a list of variables about the environment that may help.
Windows Server 2008 with IIS 7
MIME types are configured properly
MP3 clips live on a virtual directory, although some are on the server itself. Both locations can fail to play
There are no errors logged by IIS during a fail to play for a client
This happens at all times of the day and night
This happens seemingly randomly with over 200,000 different files
All MP3's are encoded at 128kbps # 44100
The HTML5 and Flash portions are both prone to failure
Usually, requests are 206, although it isn't uncommon to see 200 responses
There's 1 application pool set up for the site and configured to use only 1 worker process
We have never been able to reproduce the error, either on or off of the network the site is served from
Often, users can refresh (multiple times) and actually get the clip loaded and played through
Any help or a point in the right direction would be greatly appreciated.
Thanks!
We've done several things to try and solve this issue. We moved a portion of the media to an aws s3 bucket and refactored some code.
Essentially, we were adding listeners to the audio element by ID and by tag reference and those were both called from two different locations. After we consolidated the code to stay in the external js file, and set all listeners within a function that gets called from the ajax page, things seemed to start working out.
We still see some (very few) issues with IE9+, but have an error listener monitoring this. Each time a user reports an error, the error listeners reports a status code of 4 (MEDIA_ERR_SRC_NOT_SUPPORTED), which is odd.
So, problem is mostly fixed. Now to track down the error code 4 for IE (even though all files will eventually play through it). Perhaps it has something to do with the media player installed on the machine that's in charge of MP3 playback?
CODE:
<video controls width="100%">
<source src="/learn/guide/test.mp4">
<p>Your browser does not support H.264/MP4.</p>
</video>
The above works on everything except Firefox on Mac and Chrome on Windows.
On Firefox for Mac I get the following error message:
no video with supported format and mime type found
On Chrome for Windows I get the following error message:
the video cannot be found it may have been removed from the server.
The chrome error doesn't make sense since it's working on all other browsers.
How can I remedy this?
Do you have alternate source files? Firefox (Mac) cannot play .mp4. a link
Chrome can. Have you tried other browsers on that same Windows computer? Ensure you have network connectivity to wherever that path goes, and reboot, if you must.
While I only use mediaelement.js for Audio currently, this type of situation is exactly what it was made for.
One drawback is you need to maintain several file formats, but this mainly concerns browser limitations. AFAIK you can't use MP4 in all common browsers. Mediaelement.js is not really for streaming either.