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 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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自动生成月历代码
2006/10/09 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python实现基于SVM手写数字识别功能
2020/05/27 Python
python实现输入数字的连续加减方法
2018/06/22 Python
NumPy 数组使用大全
2019/04/25 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python实现微信机器人的方法
2019/09/06 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
预备党员承诺书
2014/03/25 职场文书
幼儿评语大全
2014/04/30 职场文书
品酒会策划方案
2014/05/26 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android