UDN-企业互联网技术人气社区

板块导航

浏览  : 1387
回复  : 4

[HTML5] HTML5视频支持检测

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-23 14:48:36 | 显示全部楼层 |阅读模式
  1. <STRONG>现在越来越多的网站都提供视频播放(非插件)。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢,下面我们来写一个列子。</STRONG>
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <body>
  5. <h1>HTML 5 视频</h1>
  6. <p>检测您的浏览器是否支持 HTML5 视频:</p>
  7. <div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
  8. <button style="font-family:Arial, Helvetica, sans-serif;" onclick="checkVideo()">Check</button>
  9. </div>
  10. </div>
  11. </body>
  12. </html>
复制代码
  1. function checkVideo()
  2. {
  3. if(!!document.createElement('video').canPlayType)
  4. {
  5. //创建video元素
  6. var vidTest=document.createElement("video");
  7. //检测是否可以播放ogg格式的视频
  8. oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  9. if (!oggTest)
  10. {
  11. //检测是否可以播放MP4格式的视频
  12. h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  13. if (!h264Test)
  14. {
  15. document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  16. }
  17. else
  18. {
  19. if (h264Test=="probably")
  20. {
  21. document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
  22. }
  23. else
  24. {
  25. document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
  26. }
  27. }
  28. }
  29. else
  30. {
  31. if (oggTest=="probably")
  32. {
  33. document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
  34. }
  35. else
  36. {
  37. document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
  38. }
  39. }
  40. }
  41. else
  42. {
  43. document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  44. }
  45. }
复制代码
  1. canPlayType方法说明:
  2. 1.定义:检测浏览器是否能播放指定的音频/视频类型。
  3. 2.返回值:
  4. "probably" ,表示浏览器最可能支持该视频或音频。
  5. "maybe" ,表示浏览器可能支持该视频或音频。
  6. "" (空字符串),表示浏览器不支持该视频或音频。
  7. 注:Internet Explorer 8 以及更早版本不支持该方法。
  8. 语法:audio|video.canPlayType(type))
  9. 参数说明:
  10. type:要检测的音频或视频类型,
  11. 常用值:video/ogg;video/mp4;video/webm; audio/mpeg;audio/ogg;audio/mp4
  12. 常用值(包括要检测的音频或视频编解码器):
  13. video/ogg; codecs="theora, vorbis"
  14. video/mp4; codecs="avc1.4D401E, mp4a.40.2"
  15. video/webm; codecs="vp8.0, vorbis"
  16. audio/ogg; codecs="vorbis"
  17. audio/mp4; codecs="mp4a.40.5"
复制代码



相关帖子

发表于 2015-8-10 20:34:22 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2015-8-16 16:56:48 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

发表于 2015-8-18 08:20:28 | 显示全部楼层
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月19日 11:39 详情 回复

感谢顶帖 么么大~

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-19 11:39:22 | 显示全部楼层

感谢顶帖 么么大~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部