html5 video标签兼容性与自定义控件
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标签兼容性与自定义控件的更多相关文章
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- [JavaScript] html5 video标签注意事项
Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...
- html5新增标签兼容性
很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...
随机推荐
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- LaTeX插入图表方法 Lists of tables and figures
Lists of tables and figures A list of the tables and figures keep the information organized and prov ...
- [原创]java WEB学习笔记92:Hibernate学习之路-- -QBC 检索和本地 SQL 检索:基本的QBC 查询,带 AND 和 OR 的QBC,统计查询,排序,分页
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- 使用@Configuration注解来代替Spring的bean配置
下面是一个典型的Spring配置文件(application-config.xml): <beans> <bean id="orderService" class ...
- linux下svn服务器安装配置与启动
1. 采用源文件编译安装.源文件共两个,为: subversion-1.6.1.tar.gz (subversion 源文件) subversion-deps-1.6.1.tar.gz (subv ...
- Maven打包pom里面配置exclude 排除掉环境相关的配置文件
Maven打包pom里面配置exclude 排除掉环境相关的配置文件 有几种方式:1. 打包时,指定环境参数把环境的配置文件复制过去2. 不打包所有的环境相关的配置文件,直接由运维的人维护 可以在上传 ...
- 33、mybatis(二)
第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...
- laravel框架总结(五) -- 服务提供者(提及契约Contracts)
首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...
- mysql show status
在LAMP架构的网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL ...
- [问题2014A09] 解答
[问题2014A09] 解答 通过简单的计算可得 \[(AB)^2=9AB,\cdots\cdots(1)\] 将 (1) 式的右边移到左边, 并将 \(A,B\) 分别提出可得 \[A(BA-9I ...