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制作网站后台管理面板
Dec 30 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 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 强制下载文件代码
2010/10/24 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
Node.js模块加载详解
2014/08/16 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python实现选择排序
2017/06/04 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
烹饪自我鉴定
2014/03/01 职场文书
团队经理竞聘书
2014/03/31 职场文书
护士先进个人总结
2015/02/13 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书