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 a html5 video on my site and all was working well until client gave me a new video to replace the old one. The new video crashes Internet Explorer (IE10 and IE11 - haven't tried others). When trying to play, a second of video is shown then whole site freezes and a pop-up tells me it's not responding.
No other browser is affected.
Have tried transcoding video in Handbrake to make sure it's using H.264 codec, but still no luck.
All other videos on site work fine in IE.
Has anyone got any suggestions that I can try?
Ps. Sorry, but can't share the video file as it's confidential to the client.
Oops - found out it was not IE but Avast (anti virus) add on that was freezing video.
Disabled Avast and video played as normal.
Still don't know why it only affected one video.
recently I tried to use video.js for playing my videos. It works quite fine but there is one exception: In IE9 the videos are not streamed; it takes a long time until they start playing.
Example here:
http://www.ulrichbangert.de/orchid/phalaenopsis/2013-03-20_Phal_I_Hsin_Salmon.php
I used Freemake Video Converter to create the videos (HTML5 mode).
Best regards - Ulrich
For others still having problems ... at least for the wordpress plugin ...
the plugin sets the mp4 type to video/mp4 ... IE9 does not like this
change the type for mp4 to ... video/x-m4v
I suspect the same may be true of other types if they won't stream in IE ...
Note: there are other issues with IE9 in that some mp4 videos are organized in a way that makes IE read the entire file before playing it. Search for qt-faststart ... but the video type was preventing my videos in wordpress from starting in IE. You might try setting preload to false for IE.
I am using videojs to embed video on the following website: www.airfixthemovie.com. Html video has preload="none" which makes it a bit better. Any suggestion on how to make the video to work perfectly in Google Chrome? The trailer stops sometimes in Chrome and it looks like Chrome is loading or buffering. Thanks for your help.
From the network inspector it seems there's something wrong with the backend serving mp4 files. The requests are canceled and there are about 4 requests to the mp4 a second and the Content-Range header seems to throw completely random digits there.
I know this doesn't really answers your question but at least investigate the mp4 thing server side.
I'm having an issue with html5 video and safari 5. It works locally, the video pulls up and everything is fine. It will also pull up on the server if I go directly to the video path. Im just using the video tag and loading a video. It works on the server in all other browsers supporting html5 video. It works locally. It just doesn't work in safari on the server. In the network panel it shows the video trying to load but returns a null 404. The path to the video is relative. I'm very confused. Any help would be greatly appreciated. Thanks.
I had a problem very similar to yours. HTML5 video/Safari working locally but not when published on server. First check your .htaccess file. You may need to modify MIME types. Here is a very good tutorial: Dive into HTML5 Video.
Second, and this solved my problem, are you serving from a protected site? The solution for me was to move video and audio files to an unprotected folder and then use an absolute path to the specific media.