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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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开发中的安全防范知识详解
2013/06/06 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
基于jquery实现多选下拉列表
2017/08/02 jQuery
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
PyCharm代码格式调整方法
2018/05/23 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
《绿色蝈蝈》教学反思
2014/03/02 职场文书
奠基仪式策划方案
2014/05/15 职场文书
加强作风建设心得体会
2014/10/22 职场文书
六年级学生评语大全
2014/12/26 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏