tags:

views:

36

answers:

3

How to check if the browser can play mp4 via html5 video tag?

A: 

You don't check. You just use the video tag, include the video formats you want to support, and it all "just works."

See the code and demos at Video for Everybody for details.

Dori
Saying this is pointless. Its like saying you just use CSS, include the stuff you want and it all just works... but we all know you tweak is 1000 different ways to get everything to play nice in all the browsers you want to support.The video tag will be much less useful unless there is a single format that is supported in all browsers. That, sadly isnt the case yet.
Justin808
The whole *point* of the `video` tag is format independence. You may not approve of that, but if you're writing scripts that call different versions of the `video` tag for different formats, yer doin' it wrong. Give `video` all the possible formats you want to support, use the Video for Everybody technique, and you're done.
Dori
yah, the whole <i>point</i> of css is to describe it once... I understand that is the point of the video tag. If i were using it i would do just like you suggest. but what if I cant store 3-4 versions of a video just 1? I would like to detect if the person can view it and fallback to something else if not. The question was about detection, not about usage.
Justin808
*I would like to detect if the person can view it and fallback to something else if not.* @Justin808, just for you: the `video` tag now does that (ok… it's always done that… but now you know). Does your browser support MP4? If yes, play it; if not, does your browser support WebM? If yes, play it; if not, does your browser support OGG? If yes, play it; if not, does your browser support QuickTime? If yes, play it; if not, does your browser support Flash? If yes, play it; if not, does your browser support images? If yes, display a JPG. Only want to support some formats? Just leave the others out.
Dori
We'll just have to agree to disagree. If the browser doesn't support the video format I have to offer, I want to provide my own handling of it, not let a fallback mechanism I have little to no control over deal with it. If it doesn't support MP4, maybe I want to redirect to a different page, maybe i want to insert a completely different set of tags, maybe I want to do one of an endless set of possible options. My link answered the question "How to check if the browser can play mp4 via html5 video tag?"
Justin808
+2  A: 

This following link explains how:

http://diveintohtml5.org/detect.html#video-formats

Justin808
Which links to [Detecting HTML5 Features](http://diveintohtml5.org/detect.html#video), which says, "The `<video>` element is designed to be usable without any detection scripts. You can specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support." Hey, that's what I wrote! And just after that, of course, Mark recommends [Video for Everybody](http://camendesign.com/code/video_for_everybody). Sound familiar? There are scripts to check what format(s) a given browser supports, but there's rarely a need to actually *do* that.
Dori
yes but if you only have the ability to support 1 video format, detection is needed to handle it. Like i said below CSS and other technologies are supposed to work in a similar manner but we all know you need detection and hacks. to answer the original question with "just works" doesn't solve or truly answer the question. the link I posted does.
Justin808
No, that's not the way the `video` tag works. Please, do some reading up on this before saying things with no basis. The **whole point** of the `video` tag is format independence, and the way it does that is through fallbacks. Only want to support a single video format? Great! Do that, and include a JPG as a fall back. End of story. [Of course, *why* you'd use the `video` tag if you only wanted to support, say, Flash is another question, but that's not what was asked.]
Dori
Thanks, I have done some reading. I know what the whole point of the tag is. I also read the question and answered it. If you think you know best, and exactly what the OP wanted the information for from the one line question, great - you can read minds. Don't presume to know what he/she wants to do with the information.
Justin808
A: 

This might help you:

<script type="text/javascript">'.
   var canPlay = false;
   var v = document.createElement('video');
   if(v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
       canPlay = true;
   }

   alert(canPlay);

</script>
Alex Polo