如何检查浏览器是否可以通过 html5 video 标签播放 mp4？答案

【问题标题】：How to check if the browser can play mp4 via html5 video tag?如何检查浏览器是否可以通过 html5 video 标签播放 mp4？
【发布时间】：2011-04-04 01:56:24
【问题描述】：

如何通过html5 video标签检查浏览器是否可以播放mp4？

【问题讨论】：

标签： html html5-video

【解决方案1】：

这可能会对您有所帮助：

<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 上面的评论正是您所需要的。此外，还有一个很好的理由来检查浏览器播放视频格式的能力。火狐不支持 MP4。 Chrome、Safari、MobileSafari 和 IE9 可以。即使您包含 Flash 播放器后备（以向不支持 HTML5 视频的浏览器显示 JPEG 后备的方式），Firefox 也不会使用它，而是显示损坏的视频播放器。

【解决方案2】：

Alex Polo 的回复还不错但是不完整试试这个看看是否也支持编解码器：

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

同样适用于 ogg、webm 等...也适用于音频 :)

【讨论】：

【解决方案3】：

以下链接解释了如何：

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

【讨论】：

哪个链接到Detecting HTML5 Features，上面写着，“<video>元素被设计成可以在没有任何检测脚本的情况下使用。你可以指定多个视频文件，支持HTML5视频的浏览器会选择一个基于他们支持的视频格式。”嘿，这是我写的！在那之后，当然，马克推荐Video for Everybody。听起来有点熟？有脚本可以检查给定浏览器支持的格式，但实际上很少需要执行。
是的，但如果您只能支持 1 种视频格式，则需要检测来处理它。就像我在下面所说的那样，CSS 和其他技术应该以类似的方式工作，但我们都知道您需要检测和黑客攻击。用“just works”回答原始问题并不能解决或真正回答问题。我发布的链接确实如此。
不，这不是video 标签的工作方式。请在说没有根据的事情之前先阅读一下。 video 标记的全部意义 是格式独立性，其实现方式是通过后备。只想支持单一视频格式？伟大的！这样做，并包括一个 JPG 作为后备。故事结局。 [当然，为什么如果您只想支持 Flash 是另一个问题，那么您会使用 video 标签，但这不是被问到的问题。]
谢谢，我已经阅读了一些内容。我知道标签的重点是什么。我也阅读了这个问题并回答了它。如果您认为自己最了解，并且确切地知道 OP 想要从一行问题中得到什么信息，那太好了 - 您可以读心。不要假设知道他/她想用这些信息做什么。
@Dori - 我也在寻找一种检测方法。不是每个人都想将视频导入 Adobe Premier，将其处理为不同的格式，将其上传到服务器，编写另一行代码，并在他们想要替换的特定格式的视频时刷新 html 文件如果无法播放，则直接链接到该文件。看来您可能没有查看原始帖子目的的全部范围；）

【解决方案4】：

我必须检查是否显示 html5 视频，隐藏我的个人按钮以在 ie7 和 ie8 中播放和关闭音频。我的解决方案如下所示。

我的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();       
    }
}

【讨论】：

【解决方案5】：

我制作了一个函数来验证您的浏览器是否能够播放音频或视频元素

    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
    }

【讨论】：