web-dev-qa-db-fra.com

Comment vérifier si le navigateur peut lire mp4 via le tag vidéo html5?

Comment vérifier si le navigateur peut lire mp4 via le tag vidéo html5?

35
Coepr

Cela pourrait vous aider:

<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>
52
Alex Polo

La réponse d'Alex Polo n'est pas mauvaise mais incomplète, essayez de vérifier si le codec est également pris en charge:

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

De même pour ogg, webm et ainsi de suite ... Fonctionne aussi avec l'audio :)

11
badfur
9
Justin808

Je dois vérifier si la vidéo html5 est affichée, masquer mon bouton personnel pour lire et désactiver l'audio dans ie7 et ie8. Ma solution est présentée ci-dessous.

Mon 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

Mon JS prêt:

$(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();       
    }
}
1
Cornac

J'ai fait une fonction pour valider si votre navigateur est capable de lire un élément audio ou vidéo

    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
    }
0
Ender Bonnet