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滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python比较2个xml内容的方法
2015/05/11 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
个人现实表现材料
2014/02/04 职场文书
小学中队活动总结
2015/05/11 职场文书
教育教学工作反思
2016/02/24 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android