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

Posted

技术标签:

【中文标题】如何检查浏览器是不是可以通过 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?

【问题讨论】:

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

【讨论】:

以上是关于如何检查浏览器是不是可以通过 html5 video 标签播放 mp4?的主要内容,如果未能解决你的问题,请参考以下文章

如何检查浏览器是不是支持 HTML5 文件上传(FormData 对象)?

如何检查 HTML5 视频是不是在 Windows Phone 7 上结束?

检查是不是正在播放 HTML5 视频元素

使 HTML5 视频的持续时间指示器向上计数而不是向下计数

如何检查不包含提交按钮的 HTML5 表单的有效性?

html js vide浏览器检测