Problems embedding mp4 video

1
votes

I'm trying to use the html5 video tag to embed an mp4 but I'm having some issues that vary across different browsers.

My code looks like this:

<video controls="controls" width="640" height="360">
    <source src="http://www.mydomain.com/video.mp4" type="video/mp4" />
</video>

IE - Won't recognize the file when trying to embed (edit: IE was actually dragging on the file size not the format) and when the uri to my video is plugged into the address bar it opens the video in windows media player.

Chrome, Firefox - Simply will not recognized the file format (edit: Firefox was dragging on the size as well, Chrome was the only browser having issues) and when the uri is plugged into the address bar it attempts to play the video within the browser but fails.

Could there be something within the file that would prevent it from being embedded? If so, how can I find this out?

2
htmlvideohtml5-videomp4
Make sure the server is sending the right header with the file. Should be "Content-Type: video/mp4". Also, as below, Firefox won't play mp4, so you need webm as well. - brianchirls

2 Answers

1
votes

The problem is likely that the browsers are not supporting MP4, because it is a proprietary format. To get the best cross-browser support you'll have to also encode your video in WebM and Ogg/Vorbis formats and then add those files to your video tag with their own source tags.

Just because a browser will play a video if you navigate directly to the video's URL does not mean that the browser supports that format. Usually, navigating straight to the video causes the browser to play the video with a plug-in such as Quicktime or VLC that has much better codec support than the browser does.

0
votes

try this without that "/"

<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" >
<source src="http://www.mydomain.com/video.ogg" type="video/ogg" >
</video>