22个HTML5的初级技巧(5)
作者:雨夜带刀 来源:雨夜带刀's Blog 发布时间:2010-12-17 12:39:00
15. 音频播放的支持
HTML5中提供了<audio>标签,解决了以往必须依靠第三方插件才能播放音频文件的问题。目前为止,还只有少数的最新浏览器支持该标签。
<audio controls="controls" autoplay="autoplay">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
为什么会有两种格式的音频文件?因为Firefox和Webkit浏览器所支持的格式存在差异,Firefox只能支持.ogg文件,而Webkit只支持.mp3的文件,解决的办法就是创建两个版本的音频文件,这样就可以兼容Firefox和Webkit的浏览器了,需要注意的是IE不支持该标签。
16. 视频播放的支持
和<audio>标签一样,HTML5也提供了<video>标签对播放视频文件的支持。YouTube也宣布了一项新的HTML5的视频嵌入。不过有点遗憾,HTML5的规范并没有指定特定的视频解码器,而是让浏览器自己来决定。这就造成了个浏览器的兼容问题,虽然Safari和IE9都支持还H.264格式的视频( Flash 播放器可以可以播放),Firefox和Opera则支持开源的Theora和Vorbis格式。因此,当显示HTML5视频的时候,也得准备2种格式。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
</video>
需要注意的是,type属性虽然可以省略掉,但是如果加上的话,浏览器就可以更快的准确的解析该视频文件。并不是所有的浏览器都支持HTML5的视频,所以得做好使用Flash版本来代替,当然,这个决定权在于你。
17. 预加载视频
预加载属性:preload,首先要确定是否需要预先加载视频,假如,访客在访问一个有很多视频展示的页面,那么就有必要预先加载一段视频,这样可以节省访客的等待时间,提高用户体验。你可以给<video>标签添加一个preload属性来实现预先加载的功能。
<video preload="preload">
...
</video>
18. 显示控件
显示控件属性可以给视频添加一个播放暂停的控件,需要注意的是每个浏览器显示的效果可能会有些差异。
<video controls="controls" preload="preload">
...
</video>
猜你喜欢
- mysql安装目录使用MySQL AB's Linux RPM分发进行安装后,将在以下系统目录产生文件目录目录内容/usr/bin客
- 很多网站现在都有使用QQ作为在线客服工具,我们点击它可以很方便的和网站人员联系,本站为你整理了在网站上使用QQ在线客服的代码,共13种风格,
- 对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如页面内容很多的话,那么所做的
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 5 - Event HandlingMooTool
- 1.MySQL中并发和隔离控制机制Meta-data元数据锁:在table cache缓存里实现的,为DDL(Data Definition
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一
- 1. 查看数据库的版本select @@version2.查看数据库所在机器操作系统参数exec master..xp_msver3. 查看
- 作者:Roland Smart原文链接:http://www.adaptivepath.com/ideas/newsletter/archi
- 代码如下: 代码如下:<% '用ASP获取远程目标网页指定内容On Error Resume Next Server.Scri
- 前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事
- 创建一个表T_Employee并插入若干数据 代码如下:create table T_Employee(FNumber VARC
- 很多年前,我们就可以轻易的从很多国营商场、火车车厢、饭馆旅馆中看到墙上挂的那个小本本-意见薄,作为经营方与顾客沟通的
- 在 Facebook 上有一个彩蛋:登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down,
- 以图像处理见长的微软Live实验室,最近发布了一款新作:Pivot。装完启动后的第一印象就是一款浏览器,和IE、FF、Chrome又不太一样
- 之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局,最近在研究DEDECMS的默认模板时,也发现该模板在大
- 使用SQL Server事件探查器工具,你可用一个捕获到的跟踪来收集有关服务器的重要信息。与索引优化向导(Index Tuning Wiza
- 数据安全是任何数据服务解决方案中的一个关键要求,而Windows Server 2008和SQL Server 2008结合起来,通过一个基
- 一、INSERT和REPLACEINSERT和REPLACE语句的功能都是向表中插入新的数据。这两条语句的语法类似。它们的主要区别是如何处理
- 在备份数据库的时候,数据表中可能存在这样的值array('a'='b','c'='d
- 传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascr