使用js检测浏览器是否支持html5中的video标签的方法

代码如下:

//检测是否支持HTML5
function checkVideo() {
    if (!!document.createElement('video').canPlayType) {
        var vidTest = document.createElement("video");
        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
        if (!oggTest) {
            h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
            if (!h264Test) {
                return false;
            }
            else {
                if (h264Test == "probably") {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
        else {
            if (oggTest == "probably") {
                return true;
            }
            else {
               return false;
            }
        }
    }
    else {
        return false;
    }
}

用上述的办法可以判断当前浏览器是否支持HTML5中的Video标签，并能支持使用MP4格式进行播放（因为Firefox貌似因为版权原因，不支持以H.264编码的MP4格式播放），如果返回true，则可以使用HTML5中的Video进行播放视频，返回false，则用Flash插件进行播放。
此方法一般用于视频网站，兼容手机，平板等设备进行视屏的播放，主要还是为了兼容IOS；

赞 (0)

相关推荐

  • transform实现HTML5 video标签视频比例拉伸实例详解

    transform实现HTML5 video标签视频比例拉伸实例详解

    曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用: 因为当我横向拉伸时: 当我纵向拉伸时: 2016-09-21 11:15:40 更新: 感谢 @RileyRen 提醒,原来还有object-fit这一属性,把它设置为fill就满足需求了,泪奔~,这篇文章就当看个笑话吧,哎,不过可以看看我家喵星人的处

  • 详解HTML5 使用video标签实现选择摄像头功能

    详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> // <input type="hidden" name="imgValue" id="imgValue"

  • 一个html5播放视频的video控件只支持android的默认格式mp4和3gp

    复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body>

  • Android编程使WebView支持HTML5 Video全屏播放的解决方法

    Android编程使WebView支持HTML5 Video全屏播放的解决方法

    本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr

  • 使用js检测浏览器是否支持html5中的video标签的方法

    复制代码 代码如下: //检测是否支持HTML5function checkVideo() {    if (!!document.createElement('video').canPlayType) {        var vidTest = document.createElement("video");        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');  

  • js判断浏览器是否支持html5

    现在HTML5似乎慢慢流行起来了,有些前端高手为了兼容考虑,会在网页中添加对客户端浏览器判断的代码,知道用户浏览器是否支持HTML5,下面分享想我自己使用的2种方法 方法一, <script> function checkhHtml5() { if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert("不支持HTML5"); } } </scri

  • js判读浏览器是否支持html5的canvas的代码

    复制代码 代码如下: <canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> va

  • JavaScript检测浏览器是否支持CSS变量代码实例

    JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式. 有三种方法可以实现这样的效果: 控制样式表-可以添加.删除.修改样式表. 控制样式规则-可以添加.删除.修改样式规则. 控制DOM中的单个元素-可以不依赖样式表来修改元素样式. JavaScript 检测浏览器是否支持 CSS 变量: const isSupported = window.CSS && window.CSS.supports && window.CSS.supports(

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

  • nodejs require js文件入口,在package.json中指定默认入口main方法

    我们都知道nodejs遵循commonJS规范,各个js是独立的. 如果目录结构是: –config 文件夹 – index.js – test.js app.js 那么在app.js中require('./config')的时候,默认是index.js. 如何修改默认的config的入口? 只需要在config中添加package.json配置文件,在这个文件中进行指定默认的入口 { "name":"配置文件", "description":&

  • 跨浏览器PHP下载文件名中的中文乱码问题解决方法

    本文实例讲述了跨浏览器PHP下载文件名中的中文乱码问题解决方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <?php $ua = $_SERVER["HTTP_USER_AGENT"]; $filename = "中文 文件名.txt"; $encoded_filename = urlencode($filename); $encoded_filename = str_replace("+", "%20",

  • JS实现从对象获取对象中单个键值的方法示例

    JS实现从对象获取对象中单个键值的方法示例

    本文实例讲述了JS实现从对象获取对象中单个键值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS获取对象中单个键值</title> </head> <body> <script> window.onl

  • PHP清除字符串中所有无用标签的方法

    本文实例讲述了PHP清除字符串中所有无用标签的方法.分享给大家供大家参考.具体实现方法如下: 很多时候需要输出一些 "纯" 字符串,也就是去除任何杂质,例如 Html 标签.空格之类的文本,输出的摘要就是如此,下面的这个函数可以帮你实现着一点. PHP实例代码如下: 复制代码 代码如下: function Bing_string_cleanr( $string ){  $string = trim( $string );   $string = strip_tags( $string

  • 使用js检测浏览器的实现代码

    在写跨浏览器的js程序中,检测浏览器是一个很重要的工作.我们不时要为不同的浏览器写分支代码.如下是一种: 复制代码 代码如下: //添加事件工具函数function addEvent(el,type,handle){    if(el.addEventListener){//for standard browses        el.addEventListener(type,handle,false);    }else if(el.attachEvent){//for IE       

随机推荐