Video不兼容IE8及之前的版本和opera mini。

格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放、免费的格式。对于IE8及以下版本可以嵌入<embed>标签。

以下为代码:

 <video controls="controls" poster="mei.png">
<!-- MP4格式不兼容Firefox 20以下和opera 24以下 Safari3.1以下-->
<!-- 部分兼容FF34-21 安卓浏览器4.3以下 安卓ff44 UC9.9 --> <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4">
<!-- <source src="video/langyabang_18.mp4" type="video/mp4"> -->
<!-- ogg格式兼容Firefox 20以下和opera 24以下 安卓ff44 UC9.9-->
<!-- 不兼容FF 2~3 Opera10.1 -->
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg">
<!-- <object data="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4"> -->
<!-- ie7/8有object会打开WindowsMediaPlayer -->
<!-- ie7/8只有embed会正常播放 -->
<!-- <img src="data:images/mei.png"> -->
<embed src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
<!-- </object> -->
</video>

推荐我用的视频格式转换工具,可以直接转换出需要的这三种格式:freemake video converter

常用的一些属性与方法:

videoElement.volumn 设置或返回音量,为0~1间的数字;

videoElement.currentTime 设置或返回当前进度,为秒数;

videoElement.duration 返回视频长度,为秒数;

videoElement.paused 返回当前是否暂停;

videoElement.play() 开始播放;

videoElement.pause() 暂停播放;

有关全屏:

Full screen API:可以让一个元素全屏,例如video或canvas。

支持的情况并不很好,具体见http://caniuse.com/#search=full%20screen

对于不支持的我的做法是,放大当前元素占满浏览器窗口。

测试情况:

Windows7下:

Safari不能放,不是很懂。。。

在其他浏览器中都正常;

IE10之前我都是让它充满整个浏览器窗口。

在米4中:

(所有浏览器都是最新)

实际测试时在UC中video会替换掉我的自定义控件,UC的控件可以全屏;

小米自带浏览器会直接全屏,用的好像是内置的播放器;

火狐是正常的;

微信和UC一样;

qq和小米自带浏览器差不多,都自动全屏并且用浏览器的控件,不过全屏下播放界面不一样。

写了一个很粗糙的播放器,在电脑端还可以接受,放到手机上实在不方便,我接着改。。。

具体见:

http:\\zhangqiong.github.io\myplugins\video.html

不好意思发现之前用的线上视频不能访问了

参考文档:

全屏 https://developer.mozilla.org/zh-CN/docs/DOM/Using_fullscreen_mode

使用 HTML5 音频和视频 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Media buffering, seeking, and time ranges  https://developer.mozilla.org/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

当音频/视频处于加载过程中时,会依次发生以下事件:http://www.w3school.com.cn/tags/av_event_durationchange.asp

html5 video标签兼容性与自定义控件的更多相关文章

  1. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  2. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  3. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  4. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...

  5. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  6. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  7. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  9. html5新增标签兼容性

    很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...

随机推荐

  1. php截取字符串

    1.substr(源字符串,其实位置[,长度])-截取字符串返回部分字符串 <?php $str ="phpddt.com"; echo substr($str, 2); / ...

  2. js省市联动

    <html> <head> <script src="http://files.cnblogs.com/files/beiz/jquery-1.8.3.js&q ...

  3. VS2012+Win7网站发布详细步骤

    VS2012+Win7网站发布详细步骤 本机环境: 本文分三个部分介绍Web项目发布的常规方法,大神级别可以略过,主要是为了方便一些初学者. 第一部分:VS2012把项目发布到文件系统. 第二部分:I ...

  4. ActiveMQ的使用笔记(基本实现原理)

    具体原理不进行深入,会用就好. 第一:当然是先安装ActiveMQ,选择操作系统位数,安装成功以后,输入网址http://ip:8161/admin/,会出现相关页面,账号密码都是admin.在这个页 ...

  5. CentOS 升级PHP

    wget http://download.fedoraproject.org/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm wget http://rpm ...

  6. Scrum 项目7.0

    一.内容 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. 秘书:指定某人当秘书,筹备.记录.整理 ...

  7. android 手风琴

    引用:http://note.youdao.com/share/?id=994df799c2dcc8d83a8909173e42f80d&type=note 先看效果,过瘾一番. 源码下载:h ...

  8. pb数据窗口设置操作

    1 使DataWindow列只能追加不能修改如何使DataWindow中的数据只能追加新记录而不能修改,利用 Column 的 Protect 属性可以很方便的做到这一点,方法如下:将每一列的 Pro ...

  9. POJ - 2183 Bovine Math Geniuses

    “模拟“题,运用哈希,不断地按照一定运算规律对一个结果进行计算,如果重复出现就停止并且输出该数.注意到仔细看题,这种题一定要细心! POJ - 2183 Bovine Math Geniuses Ti ...

  10. GAT2.0使用文档(单接口开发)

    3   开始写用例 3.1接口用例开发 1)         准备工作 l  第一步从github(https://github.com/GeneralAutomationTesting/GAT2.0 ...