I am serving a video via the HTML5 video element. I'm finding conflicting information about the appropriate MIME type for m4v video. Most demos set the type attribute to video/mp4 in the source tag in the markup. Some articles I've read indicate video/m4v for the web server Mimetype, while others indicate video/mp4. Which is correct?
See for example, this article indicating video/m4v mimetype: http://html5center.sourceforge.net/make-your-html5-video-play-on-mobile-devices
And this article indicating video/mp4: http://www.coolestguyplanettech.com/use-html-5-video-on-all-browsers/
The standard media type is video/mp4.
The standard mp4 container format is commonly used for both AAC audio, and H.264 video + AAC audio. These have different media types, audio/mp4 and video/mp4, however often you want different applications for audio and video and on some systems it is only possible to associate a default application with a file extension. Therefore it has become popular in some circles to use the extensions .m4a and .m4v for audio and video(+audio), respectively, in an mp4 container. However this does not affect the media type, which already distinguishes these using the audio or video prefix.
A twist, however, is that Apple started using their own media type, video/x-m4v, for videos from their store, which are in an mp4 container and use a .m4v extension. This is set to open the video in iTunes by default. Sometimes that is necessary because the video uses DRM, AC-3 Dolby Digital audio, or other capabilities that are not commonly supported in an mp4 container, but which are supported by iTunes for files with a .m4v extension. If you rely on such capabilities then you may want to use this media type instead of the standard one.
Media types with no x- are standardized in an RFC and tracked by IANA. No media type with the name video/m4v has been standardized. Non-standard media types have a x- prefix.
I only write HTML5 for special projects, but I've had a problem which I was able to solve quite by accident. In my blocks, I was writing the video code like this:
<source src="Videos/myvideo.mp4" type="video/mp4">
<source src="Videos/myvideo.webm" type="video/webm">
Here was my problem: If I put the mp4 line first, Google Chrome would play the video part, but there would be no sound. If I put the webm line first, Google Chrome would play the video and sound correctly, but Apple Safari would not detect the video at all. Even if I added the codec information in the type= statement, it had no effect.
I was about to cave in and try to use Flash, but I happened on the solution, mostly by accident. In the line for mp4, I replaced the type="video/mp4" with type="video/m4v". It cured the problem completely! Note: I did not change the video file extentions from mp4 to m4v -- I only used m4v in the type= statement.
I couldn't find any documentation to tell me to do this, I just got interested in the difference between .mp4 and .m4v file extentions, and started playing around. I use Linux (Xubuntu) and I had created my videos as both webm and H.264 mp4 files, using Openshot Video Editor. Maybe the inner workings of Openshot caused this to be an issue, but anyway -- that's how I solved this problem. My mp4 videos play perfectly. I hope this helps somebody else -- MinnesotaJon
Answering this 8 years later with actual testing in Brave Version 1.22.70 Chromium: 89.0.4389.105 (Offizieller Build) (64-Bit) and Firefox 86.0.1 (64-Bit) on Linux.
<video controls="" controlslist="" preload="metadata">
<source type="video/m4v" src="https://example.com/v.m4v">
</video>
Does NOT work.
But video/x-m4v and video/mp4 both work with the m4v file I am testing with. I guess it's best to use x-m4v based on the accepted answer.
Actually that totally depends on which video container you are using. Most browsers support the webm and/or mp4 file formats. Serving a combination of these two sourcefiles ensures browsers kan view the file. There's also the .ogg format if you wish to include it.
Not so sure about the m4v format, but it sounds like it's not one commonly used on the web. Anyway, I'd say serve m4v with a video/m4v MimeType and mp4 as a video/mp4 MimeType.
Related
Someone I know has asked that I convert the videos on his webpage from using FlowPlayer to using native HTML 5 video.
To start off, I read that 3 formats are sufficient to cover the main desktop browsers (Chrome, Firefox, IE and Opera). Starting from .avi, I used Miro Video Converter to get videos in .mp4, .ogg and .webm as can be seen here:
To further help with cross-compatibility, I decided to use VideoJS.
The mark up seemed straightforward too:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="500px" height="300px"
poster="something.png">
<source src="something.mp4" type="video/mp4" />
<source src="something.webm" type="video/webm" />
<source src="something.ogv" type="video/ogg" />
</video>
Here was what I found on the browsers (latest versions of all):
Google Chrome v30.0: no problems whatsoever. It picked .mp4 which was the highest quality of the three formats. Great.
Opera v12.16: again, and a little surprisingly, no problems. Same behaviour as Chrome.
IE 11: It's all downhill from here. IE 11 waits for the entire video to finish buffering and then starts playing only audio. So it was audio + the poster.
Firefox v24.0: Unlike IE, it doesn't wait for the entire video to buffer but like IE, it plays only audio and no video. I read somewhere that Firefox does indeed support .mp4 playback as long is it is a Windows 7 or higher OS. I am using Windows 8.
I then did some reading up on Apache. The headers stated that Firefox and IE were both recognizing the mp4 as just that as opposed to some other MIME type. Even so, I added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
That didn't make a difference.
I then swapped the order of the source tags so that the .ogv video came first. Now, the video played in Firefox too but the .ogv is not nearly as high quality as the .mp4.
The page in question is this: http://keyrecords.com/Artist%20Pages/haggard.html
I am linking to the page above for illustration purposes only. On the page above, .ogv comes first, so yes, I know it plays in Firefox.
So my question is this: what do I need to do to get Firefox and IE 10/11 to play the .mp4? It is safe to assume that these are the latest version of each of the browsers running Windows 7/8 machines.
EDIT: MediaInfo gave me this information about the file (does it look right?):
I managed to solve the issue by using the HandBrake converter.
I gave it the existing .mp4 and asked it to give me a new .mp4 with the following specs:
This new .mp4 works in all 4 browsers without issues :)
Something about the way Miro Video converter converted the files caused IE and Firefox to see the audio track only but not the video track. This was rectified by reconverting using HandBrake converter.
I have a mp4 video which is downloaded from some external site. The video is playing well in that tutorial site. But not in my site. This issue is only in ie9 browser.
source
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
I have downloaded the mp4 file and also ogg file which is not important for the ie9. In the following link the video is working fine.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
The same source and videos only i'm using but the video is not playing.I have checked the permissions also. Please help me to resolve this problem
First load up the page and press F12 to bring up the developer tools , then pop over to the console tab in the console , get reference to the video object using the script below (If the video element is not the first video element then you will need to adjust the array value ).
document.getElementsByTagName("video")[0].error.code
The code that is returned let you know what’s gone wrong,
MEDIA_ERR_ABORTED : 1
The fetching process for the media resource was aborted by the user.
MEDIA_ERR_DECODE : 3
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
MEDIA_ERR_NETWORK : 2
A network error has caused the user agent to stop fetching the media resource, after the resource was established to be usable
MEDIA_ERR_SRC_NOT_SUPPORTED : 4
The media resource specified by src was not usable.
In IE9 if you get error code 4 then there are two common issues:
INCORRECT ENCODING
IE9 supports H.264 in an MP4 container and WebM if the user has the codec installed on their machine. To support IE9 you will need to ensure that you have correctly encoded your video. For H.264 video I use Miro (a .net application on windows that wraps up FFMPEG) or if I want a specific baseline or setting I use Expression Encoder.
DIRECTORY
Are you placing the media files in the same directory holding this html?
If not, set right path to files.
MIME TYPE
You need to make sure your sever returns the correct MIME type when it returns a file. If the file is MP4 then the files MIME type should be video/mp4. If you want to check the MIME type then use the F12 developer tools (press F12 in IE9) and then navigate to the Network Tab. Press Start Capturing and refresh the web site.
GOOD LUCK
Finally i make my video work by the following way.
I found the problem by using the Jef Rechards and nmaier answers. I have faced two problems
1) My video was encoded with mpeg4 instead of h264. So i have encoded using ffmpeg libx264 codec .
2) The mime type of my video was text/plain even given the type="video/mp4" in video source. I have added the mime type by added the following code in my .htaccess file
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Now the video is playing well in ie9
Ok, this is just guessing, but in order for html5 video to play, the server needs to serve the files with the correct MIME or IE9 (and other browsers) will refuse these files.
MSDN:
Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play.
MDN:
If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).
It's strange, some MP4 files will play in HTML5, but others won't. Here is a test page http://psdtucss.com/test/test2.html, open it in Chrome 19.0.1084.46 m. The first MP4 plays, but the other one won't. What's the reason. The code is very simple:
<h3>the first mp4 file can play</h3>
<p><video width="640" height="264" controls="controls"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>
<h3>but the other can't play</h3>
<p><video width="640" height="264" controls="controls"><source src="2.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>
How can I fix this?
I tried videojs, but still some MP4 files won't play. Test page is here:
http://psdtucss.com/test/test.html
mp4 is only the container format. It may contain video and audio in a number of different codecs. Players (including those in a browser) need to support the container format and all of the used codecs in order to play a video properly.
Using VideoJS is definitely a good idea, it handles a lot of browser-specific workarounds for you.
However it does not solve one problem: There is no single video codec supported in all browsers. (See also Wikipedia: HTML5 video: Browser_support)
The practical solution probably is to provide two versions: h264 in a mp4 container and what is usually called webm (VP8 video and vorbis audio in a specific Matroska container). With those two you cover all major browsers.
For video conversion/recoding there are some tools and services available. I have no idea about your operating system or requirements. So just as a wild guess:
Something I used to help a friend publish a few videos on his little blog is this shell script using ffmpeg for conversion. It still leaves a lot of potential for improvement (in all of video quality, performance and coding) but should be good enough to get started.
The first video uses h264 encoding which is supported by everything except Firefox and Opera. The second video uses the MPEG-4 video codec which is not supported by browsers. The only widely supported video codecs are Theora, H.264 and VP8.
MPEG-4 Part 2 video codec is different from the MPEG-4 Part 14 container format
Your video 1.mp4 is encoded using h.264 but video 2.mp4 is not.
get MediaInfo to check about it.
MP4 supports multiple codecs. Some players don't support all codecs (some codes require licensing, or some codecs were released after the browser was written).
I have searched around quite a bit but have not solved my problem.
I have a video tag running as follows:
<video
class="ne"
src="{{ page | video_url }}"
muted="true"
volume="0"
controls
width="720"
height="480"
poster="{{ page | video_poster_image_url }}"
type="video/mp4">
</video>
I am using Jekyll for the URLs. They work fine.
The site is live at switzerlandllc.com. Click any video in FF and it shows an image and an X. Chrome and other browsers work fine.
If you grab the source of a video and load it in a new tab it plays fine. At least it does for me.
I have added:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to my htaccess file. I suspect that I don't need the .ogv or .webm.
I don't understand why loading the video URL will play the videos fine but loading the video into a video tag fails.
Any ideas?
This is caused by the limited support for the MP4 format within the video tag in Firefox. Support was not added until Firefox 21, and it is still limited to Windows 7 and above. The main reason for the limited support revolves around the royalty fee attached to the mp4 format.
Check out Supported media formats and Media formats supported by the audio and video elements directly from the Mozilla crew or the following blog post for more information:
http://pauljacobson.org/2010/01/22/2010122firefox-and-its-limited-html-5-video-support-html/
I can confirm that mp4 just will not work in the video tag. No matter how much you try to mess with the type tag and the codec and the mime types from the server.
Crazy, because for the same exact video, on the same test page, the old embed tag for an mp4 works just fine in firefox. I spent all yesterday messing with this. Firefox is like IE all of a sudden, hours and hours of time, not billable. Yay.
Speaking of IE, it fails FAR MORE gracefully on this. When it can't match up the format it falls to the content between the tags, so it is possible to just put video around object around embed and everything works great. Firefox, nope, despite failing, it puts up the poster image (greyed out so that isn't even useful as a fallback) with an error message smack in the middle. So now the options are put in browser recognition code (meaning we've gained nothing on embedding videos in the last ten years) or ditch html5.
So I accidentally opened an mkv video file with Chrome, and to my surprise it played it using the native player:
<video src="video.mkv"></video>
It was playing perfectly. HTML5 video supports matroska container?
HTML5 doesn't support any video formats, or rather HTML5 doesn't specify what formats browsers should support. It's up to the browsers to decide which formats they choose to support. Apparently Chrome plays .mkv, but I wouldn't be surprised if other browsers didn't play the same file.
The website has probably set the mimetype of the file to video/webm. Chrome will open this inline rather than forcing a download (because otherwise it doesnt know what to do with it or how to open it).
E.g., in apache this is done by using the AddType directive (can be done in a htaccess):
AddType video/webm .mkv
I'd be surprised if browsers didn't support mkv, as the webm container is just a restricted version of the matroska format. Beyond that you'd have to check the codec of the video inside, and ensure your browser can handle that. If the video format is VP8 or VP9 and the audio is Opus or Vorbis it's webm compliant and might as well be renamed as such. Note that H.264, H.265 and MP3 are not webm compliant and you should avoid using that extension on files that include those formats, the video would still play but it would technically break the webm specification and is frowned upon.