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

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

以下链接介绍了如何：

这可能会帮助您：

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

”。
var canPlay=false；
var v=document.createElement（'video'）；
如果（v.canPlayType&&v.canPlayType（'video/mp4'）。替换（/no/，“”））{
能玩=真；
}
警惕（能玩）；

Alex Polo的回复不错，但不完整。请尝试此选项以检查编解码器是否也受支持：

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

---

同样，对于ogg、webm等。。。也适用于音频：）

我必须检查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

---

我做了一个功能来验证你的浏览器是否能够播放音频或视频元素

    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
    }

---

链接到，上面写着，“元素设计成无需任何检测脚本即可使用。你可以指定多个视频文件，支持HTML5视频的浏览器将根据他们支持的视频格式选择一个。”嘿，这就是我写的！当然，就在那之后，马克建议。听起来熟悉吗？有脚本可以检查给定浏览器支持的格式，但实际上很少需要这样做。是的，但如果您只能支持1种视频格式，则需要检测来处理它。就像我在下面说的，CSS和其他技术应该以类似的方式工作，但我们都知道你需要检测和黑客。用“just works”回答最初的问题并不能解决或真正回答问题。我发布的链接是这样的。不，这不是

video

标签的工作方式。在毫无根据地说之前，请仔细阅读一下。

video

标记的全部要点是格式独立性，其实现方式是通过回退。是否只支持单一视频格式？伟大的这样做，并包括一个JPG作为后援。故事结束了。[当然，如果你只想支持Flash，为什么要使用

视频

标签是另一个问题，但问题不是这个。]谢谢，我读了一些书。我知道标签的全部意义。我也读了问题并回答了它。如果你认为你最清楚，也最清楚OP想从这一行问题中得到什么信息，那就太好了——你可以读心术。不要妄想知道他/她想对这些信息做什么。@Dori-我也在寻找一种检测方法。并非所有人都希望将视频导入Adobe Premier，将其处理为不同的格式，将其上载到服务器，写出另一行代码，并在他们有特定格式的视频时刷新html文件，如果无法播放，他们打算将其替换为指向该文件的直接链接。看来您可能没有看到原始帖子的全部目的；）亚历克斯·波罗的上述评论正是你所需要的。此外，还有一个非常好的理由来检查浏览器播放视频格式的能力。Firefox不支持MP4。Chrome、Safari、MobileSafari和IE9都有。即使您包含Flash播放器回退（以您向不支持HTML5视频的浏览器显示JPEG回退的方式），Firefox也不会使用它，而是显示损坏的视频播放器。

    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
    }