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 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 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扩展图文教程
2008/12/12 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python中使用中文的方法
2011/02/19 Python
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
化妆品促销方案
2014/02/24 职场文书
给老婆的保证书范文
2014/04/28 职场文书
组织鉴定材料
2014/06/02 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
催款函怎么写
2015/06/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书