web-dev-qa-db-ja.com

ブラウザがhtml5ビデオタグ経由でmp4を再生できるかどうかを確認する方法

ブラウザがhtml5ビデオタグ経由でmp4を再生できるかどうかを確認する方法

html5html5-video
35
Coepr

これはあなたを助けるかもしれません：

<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

Alex Poloの返事は悪くありませんが、不完全です。コーデックがサポートされているかどうかを確認するには、これを試してください。

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

同様にogg、webmなどについても...オーディオでも動作します:)

11
badfur

この次のリンクはその方法を説明しています。

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

9
Justin808

IE7およびIE8で再生およびオーディオをオフにするための個人用ボタンを非表示にするには、html5ビデオが表示されるかどうかを確認する必要があります。私の解決策を以下に示します。

私の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

私のJSの準備：

$(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

ブラウザがオーディオまたはビデオ要素を再生できるかどうかを検証する関数を作成しました

    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