So I'm putting together a very video-heavy project with self-hosted videos in HTML5. I've got my videos encoded in both H.264/AAC MP4 and WebM formats, and they work beautifully in Chrome, Firefox, Safari, Mobile Safari etc. All good.
This is the most basic version of my code (in the production site I'm running it with VideoJS on top, however whether it's there or not, this problem occurs so I've removed the code for it from this example):
<video preload="true" width="720" height="406" controls="true">
<source src="/55.mp4" type="video/mp4">
<source src="/55.webm" type="video/webm">
</video>
But Internet Explorer refuses to play ball. When I load up the page in IE 11, I just get a video decoding error:
In Internet Explorer's developer tools, I can see that it's getting a content type of video/mp4, and just to completely eliminate server issues I've tried it on both my local Apache install and my web hosting. If I use the console to get the playback error, I get MEDIA_ERR_DECODE : 3, which, according to the site I just linked to, means
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
This tells me that there's a problem with the video encoding... but I can't see it.
The video files were originally exported as QuickTime videos from Adobe Premier or Final Cut Pro (I'm not sure which the video guy uses), and then run through Miro Video Converter to output MP4 and WebM formats. When I open the MP4 files up in VLC, it shows me the following information about the codecs in use:
I can't see anything wrong there; it looks exactly like every reference I've found online says MP4 video should be for maximum compatibility - H.264/AVC video and AAC audio.
Can anyone see anything wrong with what I'm doing? I'd love to be able to post an example video, however I can't due to privacy reasons. All the same any help would be greatly appreciated.
So this is somewhat embarrassing, but I did eventually figure it out.
The problem wasn't so much with Internet Explorer as it was the VM I was using to run Windows to test in Internet Explorer.
Essentially, I was running Windows 7 inside of a VirtualBox VM. When I (in desperation) sought out an actual physical machine running Windows... lo and behold it played!
I can only assume that the video drivers provided by VirtualBox didn't like decoding MP4 or something. The videos played fine in other browsers, but I'm guessing they decode/render video differently to how IE does.
I had the same issue recently with VirtualBox running Windows7 on MacOS. Solved by enabling 3D acceleration in the "Display" settings for the problematic VM.
The OP is a genius. I was struggling with this same issue for days and could only test on a windows machine today. This led me to change the configuration of my Parallels Desktop v15.
Im running IE 11 on Windows 8.1 and changed in the Graphics > Resolution > Advanced settings > Vertical synchronization should be ticked off.
Maybe this will help other people.
Maybe worth a shot: Rebooting Windows 7 within VMWare Fusion solved it for me.
Related
I am trying to work with html5 "video" tag in MVC4 application. I need to play mp4 videos. I am using Chrome Version 57.0.2987.133 (64-bit), all updates are installed, Win 10 Pro. The code is very simple
<video id="vidSample" width="1024" height="600" controls>
<source id="vidSource" src="/Video/33.mp4" type="video/mp4">
</video>
Sometimes mp4 samples are playing OK, but very often - no (video is not shown, just white background and "play" button is disabled). The same samples. Those, which are short play more often then those which are longer than 30 sec. When long videos are playing I have problems with seeking. If I move the slider, video stops playing.
In Mozilla Firefox and IE11 my application works completely file with all the mp4 samples I have.
I have just discovered an interesting thing. If I open this video in Chrome using a link to it "http://localhost:49887/Video/33.mp4" it is not playing. But if I open it with Chrome right from the file system "file:///D:/Projects/VideoTester/VideoTester/Video/33.mp4" it is playing perfectly well always. Maybe it is somehow depends on Visual Studio web server, app.config etc.?
I have found out what was wrong. The problem is in Visual Sudio. I am using 2012 and was running my project under it. Then I tried to deploy my project to IIS, opened the page in Chrome and saw that issue was gone.
So the issue is in Visual Studio IIS Express. In a project properties/Web there is a "Servers" section where you can select which web server to use. I have "Use Local IIS Web Server" + "Use IIS Express" selected. It seems that there is some compatibility issue between this web server and Chrome (other browsers are OK), so that video is streaming incorrectly.
I want to show a video on my website. I have created a .mp4 file and using the HTML5 video tag to add it to the html.
The problem is that it is not being displayed in chrome. I would also like to know how I can replay it again and again.
I too had the same issue. I changed the codec to H264-MPEG-4 AVC and the videos started working in HTML5/Chrome.
Option selected in converter: H264-MPEG-4 AVC, Codec visible in VLC player: H264-MPEG-4 AVC (part 10) (avc1)
Hope it helps...
After running into the same issue - here're some of my thoughts:
due to Chrome removing support for h264, on some machines, mp4 videos
encoded with it will either not work (throwing an Parser error when
viewing under Firebug/Network tab - consistent with issue submitted
here), or crash the browser, depending upon the encoding settings
it isn't consistent - it entirely depends upon the codecs installed
on the computer - while I didn't encounter this issue on my machine,
we did have one in the office where the issue occurred (and thus we
used this one for testing)
it might to do with Quicktime / divX settings (the machine in
question had an older version of Quicktime than my native one - we
didn't want to loose our testing pc though, so we didn't update it).
As it affects only Chrome (other browsers work fine with VideoForEverybody solution) the solution I've used is:
for every mp4 file, create a Theora encoded mp4 file (example.mp4 -> example_c.mp4)
apply following js:
if (window.chrome)
$("[type=video\\\/mp4]").each(function()
{
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
Unfortunately it's a bad Chrome hack, but hey, at least it works.
Source: user: eithedog
This also can help: chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
Also check your version of crome here: html5test
(#Alston posted this as a comment, and it worked for me, and 9 others who also upvoted, so posting this as an answer to get more eyeballs on it:)
Simply re-encoding the video file with this FFMPEG command solves it:
ffmpeg -i input.mp4 -vcodec h264 output.mp4
This started out as an attempt to cast video from my pc to a tv (with subtitles) eventually using Chromecast. And I ended up in this "does not play mp4" situation. However I seemed to have proved that Chrome will play (exactly the same) mp4 as long as it isn't wrapped in html(5)
So here is what I have constructed. I have made a webpage under localhost and in there is a default.htm which contains:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video controls >
<source src="sample.mp4" type="video/mp4">
<track kind="subtitles" src="sample.vtt" label="gcsubs" srclang="eng">
</video>
</body>
</html>
the video and subtitle files are stored in the same folder as default.htm
I have the very latest version of Chrome (just updated this morning)
When I type the appropriate localhost... into my Chrome browser a black square appears with a "GO" arrow and an elapsed time bar, a mute button and an icon which says "CC". If I hit the go arrow, nothing happens (it doesn't change to "pause", the elapsed time doesn't move, and the timer sticks at 0:00. There are no error messages - nothing!
(note that if I input localhost.. to IE11 the video plays!!!!
In Chrome if I enter the disc address of sample.mp4 (i.e. C:\webstore\sample.mp4 then Chrome will play the video fine?.
This last bit is probably a working solution for Chromecast except that I cannot see any subtitles. I really want a solution with working subtitles.
I just don't understand what is different in Chrome between the two methods of playing mp4
Encountering the same problem, I solved this by reconverting the file with default mp4 settings in iMovie.
I was actually running into some strange errors with mp4's a while ago. What fixed it for me was re-encoding the video using known supported codecs (H.264 & MP3).
I actually used the VLC player to do so and it worked fine afterward. I converted using the mentioned codecs H.264/MP3. That solved it for me.
Maybe the problem is not in the format but in the JavaScript implementation of the play/ pause methods. May I suggest visiting the following link where Google developer explains it in a good way?
Additionally, you could choose to use the newer webp format, which Chrome supports out of the box, but be careful with other browsers. Check the support for it before implementation. Here's a link that describes the mentioned format.
On that note: I've created a small script that easily converts all standard formats to webp. You can easily configure it to fit your needs. Here's the Github repo of the same projects.
I have an issue at the moment where I cannot get any .mp4 videos to play on Google Chrome 28, this only happens on Windows 7 machines, but not all of them.
As it stands, I was able to replicate the issue on three Windows machines out of five.
Even if I enter the direct URL to the .mp4 file in the address bar, Chrome still won't play it.
Can anyone here replicate this issue?
I have used a few different .mp4 files to test, but here's one:
http://www.w3.org/2010/05/video/mediaevents.html
I would appreciate any help.
Note: By going Chrome Advances settings and turning off "Use hardware acceleration when available" Chrome is able to play the video, however that option is turned on by default, so not the perfect solution to the problem.
Thanks a lot.
UPDATE: updating the video drivers fixed it, but again... not the ideal solution...
we also had this problem... Both Webm and theora/ogg worked fine in chrome and the mp4 video worked fine on IE9 and in firefox. Just chrome fails.
We also manage to fix this by updating the video drivers (intel HD on a DELL PC), so looks like a problem in the H.264 acceleration used in chrome and old intel drivers
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.
I’ve tried several combinations of types and setting in (the excellent) mediaplayer.js, but cannot get BBC Radio 3 to play in Chrome. The stream URL is here, and the playlist from which it is taken is here.
The tag is:
<audio src="http://bbcmedia.ic.llnwd.net/stream/bbcmedia_intl_lc_radio3_p?s=1362261751&e=1362276151&h=47e8b2755e05d1a5ceeb665f116984de" type="audio/mp4" id="player"></audio>
Looking at Chrome’s inspector, I see that the network is calling the stream, but it just loads indefinitely, without audio starting.
Other streams are working fine (demo), but this particular one is problematic, and I assume it has to do with the AAC+ format.
Edit: The instantiation code is here, figure it’s clearer than pasting the whole thing in.
Edit 2: It works in Safari (Mac)! Which I assume is related to Quicktime. Which is why I believe that AAC+ is the issue.
See https://groups.google.com/forum/m/#!msg/jplayer/9Ks2Crfjwrg/jDCDBgv3qr0J. It seems that AAC+ support is somewhat odd. It also seems that AAC+ can be placed in various containers. like m4a and FLV. Also see stackoverflow.com/questions/4018596/aac-streaming-from-shoutcast-in-flash.
Firstly, which OS, which Chrome version did you test with?
AAC+ is covered by software patents so it isn't going to be available if your OS has disabled it in the ffmpeg library that Chrome depends on (on OS where Chrome doesn't bundle its own ffmpeg). If you are running something like debian or ubuntu it might be disabled by default for legal reasons. On Windows Chrome may have removed support from the bundled ffmpeg themselves to avoid liability issues.
Alternatively since AAC+ supports DRM it might be an issue with BBC encrypting or blocking the stream in a way that Chrome doesn't support.
If I'm right then there's probably no good solutions since you can fix it on your machine (with a custom Chrome/FFMpeg build) but not on your end-users side where it really matters. Flash supports AAC so you could fallback to a flash player using the codec fallback techniques described here but you might run into the crossdomain/licensing issues described here.
The MDN codec page claims Chrome 3.0 (but not Chromium) supports AAC in MP4 containers but it does not clarify whether that support extends to AAC+ (unless that's what they mean by "main only").
html audio player plays aac+ file in chrome browser.
<audio id="audio1" controls autoplay>
<source src="test.aac"></source>
</audio>
it does play aac+ streams if it is from SHOUTCAST v2.
(sometime crossdomain.xml must be exist in shoutcast folder for audition)