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. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  2. LaTeX插入图表方法 Lists of tables and figures

    Lists of tables and figures A list of the tables and figures keep the information organized and prov ...

  3. [原创]java WEB学习笔记92:Hibernate学习之路-- -QBC 检索和本地 SQL 检索:基本的QBC 查询,带 AND 和 OR 的QBC,统计查询,排序,分页

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. 使用@Configuration注解来代替Spring的bean配置

    下面是一个典型的Spring配置文件(application-config.xml): <beans> <bean id="orderService" class ...

  5. linux下svn服务器安装配置与启动

    1. 采用源文件编译安装.源文件共两个,为: subversion-1.6.1.tar.gz  (subversion 源文件) subversion-deps-1.6.1.tar.gz  (subv ...

  6. Maven打包pom里面配置exclude 排除掉环境相关的配置文件

    Maven打包pom里面配置exclude 排除掉环境相关的配置文件 有几种方式:1. 打包时,指定环境参数把环境的配置文件复制过去2. 不打包所有的环境相关的配置文件,直接由运维的人维护 可以在上传 ...

  7. 33、mybatis(二)

    第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...

  8. laravel框架总结(五) -- 服务提供者(提及契约Contracts)

    首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...

  9. mysql show status

    在LAMP架构的网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL ...

  10. [问题2014A09] 解答

    [问题2014A09]  解答 通过简单的计算可得 \[(AB)^2=9AB,\cdots\cdots(1)\] 将 (1) 式的右边移到左边, 并将 \(A,B\) 分别提出可得 \[A(BA-9I ...