HTML5的结构和语义(5):内嵌媒体


Posted in HTML / CSS onOctober 17, 2008

视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此,WhatWG 提议引入一个新的 video 元素,用来嵌入任意视频格式。例如,可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”:
<video src="http://www.cafeaulait.org/birds/sora.mov" />

对于以哪种格式和解码器作为首选,仍然有争议。可能会强力推荐或要求使用 Ogg Theora。还可以可选地支持 QuickTime 等专有格式和 MPEG-4 等受专利限制的格式。实际使用的格式很可能由市场决定,就像是 GIF、JPEG 和 PNG 格式那样(这些格式通过市场竞争压倒了 BMP、X-Bitmap 和 JPEG 2000 等竞争者,成为 img 元素的首选格式)。

还提议引入 audio 元素。例如,可以使用以下代码给 Web 页面加上背景音乐:
<audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" />

autoplay 属性指示浏览器在装载页面后立即开始播放,而不等待明确的用户请求。音频循环播放 20,000 次,然后停止(或者在用户关闭窗口或转到另一个页面时停止)。当然,浏览器可以(而且应该)允许用户关闭内嵌的媒体,不应该只按页面作者的要求去做。

浏览器必须支持 WAV 格式,还可以支持 MP3 等其他格式。

因为老式浏览器不支持这些元素,而且它们对于盲人和聋人用户来说没有意义,所以 audio 和 video 元素可以包含额外的标记,用来描述音频和视频的内容。这对搜索引擎也有帮助。在理想情况下,这些标记是音频和视频内容的完整文字版本。例如,代码8 显示 用 HTML 5 编写的 John F. Kennedy 的就职演说。
<audio src="kennedyinauguraladdrees.mp3">
<p>
Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
President Eisenhower, Vice President Nixon, President Truman,
Reverend Clergy, fellow citizens:
</p>
<p>
We observe today not a victory of party, but a celebration of
freedom -- symbolizing an end, as well as a beginning --
signifying renewal, as well as change. For I have sworn before
you and Almighty God the same solemn oath our forebears
prescribed nearly a century and three-quarters ago.
</p>
<p>
The world is very different now. For man holds in his mortal
hands the power to abolish all forms of human poverty and all
forms of human life. And yet the same revolutionary beliefs for
which our forebears fought are still at issue around the globe --
the belief that the rights of man come not from the
generosity of the state, but from the hand of God.
</p>
<p>
...
</p>
</audio>

(待续)

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 #HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 #HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 #HTML / CSS
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python删除n行后的其他行方法
2019/01/28 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
电子商务应届生求职信
2013/11/16 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技