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的loading动画加载相关的transition优化
May 18 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
thinkphp命名空间用法实例详解
2015/12/30 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
公司建议书怎么写
2014/05/15 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
创优争先心得体会
2014/09/11 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年项目工作总结
2015/04/29 职场文书
技术入股协议书
2016/03/22 职场文书