如何检查浏览器是不是可以通过 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,上面写着,“<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();" >
<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 对象)?