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制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 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
建立动态的WML站点(二)
2006/10/09 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
让焦点自动跳转
2006/07/01 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python retrying模块的使用方法详解
2019/09/25 Python
通过python检测字符串的字母
2020/02/18 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
物流合作计划书
2014/01/10 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
OpenCV实现普通阈值
2021/11/17 Java/Android