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

Question

score 55 · Answer 1 · answered Aug 27 '10 at 19:23

55

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>

answered Aug 27 '10 at 19:23

Alex Polo

905
9
21

5

Alex Polo's comment above is exactly what you need. Also, there is a perfectly good reason to check for the browser's ability to play a video format. Firefox does not support MP4. Chrome, Safari, MobileSafari, and IE9 do. Even if you include a Flash player fallback (in the manner you'd show a JPEG fallback to browsers that don't support HTML5 video), Firefox does not resort to it and instead displays a broken video player. – ZiggyTheHamster Jan 06 '11 at 19:24

score 13 · Answer 2 · edited May 05 '15 at 16:20

13

Alex Polo's reply is not bad but incomplete try this to check if the codec is supported too:

var mp4Supported = (!!document.createElement('video').canPlayType('video/mp4; codecs=avc1.42E01E,mp4a.40.2'));

Likewise for ogg, webm and so on ... Works with audio too :)

edited May 05 '15 at 16:20

answered Nov 15 '11 at 09:51

badfur

452
3
8

score 9 · Answer 3 · edited Aug 27 '13 at 08:31

9

This following link explains how:

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

edited Aug 27 '13 at 08:31

Stano

8,749
6
30
44

answered Aug 26 '10 at 06:11

Justin808

20,859
46
160
265

Which links to [Detecting HTML5 Features](http://diveintohtml5.org/detect.html#video), which says, "The ` – Dori Aug 26 '10 at 06:50
3

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 Aug 26 '10 at 23:14
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 Aug 27 '10 at 03:30
3

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 Aug 27 '10 at 19:14
@Dori - I was looking for a detection method as well. Not everyone wants to import video into Adobe Premier, process it into a different format, upload it to a server, write out another line of code, and refresh the html file when they have a video of a specific format that they intend to replace with a direct link to the file if it cannot be played. It seems you might not be viewing the entire scope of the original post's purpose ;) – Abandoned Cart Oct 29 '12 at 20:09

score 1 · Answer 4 · edited Jun 04 '18 at 14:37

I have to check if the html5 video is displayed, to hide my personal button to play and turn audio off in ie7 and ie8. My solution is shown below.

My html:

<div id="contenitore_video" style="position:absolute;top:0;left:0;">
    <video id="cont_video"  autoplay onFocus="this.blur();" width="100%" height="100%"   >
        <source src="video/xxx.mp4" type="video/mp4" />
        <source src="video/xxx.theora.ogv" type="video/ogg" />
        <div id="sfondo_ridimensionato" >
            <img src="img/sfondo_home1.jpg"  >      
        </div>
    </video> 
</div>

...

<div id="controlli_video" style="position:absolute; top:10px;right:25px; height:50px; text-align:right;">
    <a class="video_play" onFocus="this.blur();" style="display:none;" href="javascript:void(0)" onClick="controlla_video(1)">Play</a> ...

</div

My JS ready:

$(document).ready(function(){
    //controllo se il video funziona o si vede il video alternativo
    //  var numero = $('#sfondo_ridimensionato:hidden').length;
    //  alert(numero);

    if($('#sfondo_ridimensionato:hidden').length == 0){
        $('#controlli_video').hide();       
    }
}

score 0 · Answer 5 · answered Jul 09 '19 at 16:34

I made a function to validate if your browser is able to play audio or video element

    const checkMedia = mediaType => {
    let canPlay = false
    const mediaFormat = {
      audio: 'audio/mp3',
      video: 'video/mp4'
    }
      let media = document.createElement(mediaType)
    if (
      media.canPlayType &&
      media.canPlayType(mediaFormat[mediaType]).replace(/no/, '')
    ) {
      canPlay = true
    }
      return canPlay
    }

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

5 Answers5

Linked