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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python正则表达式的使用
2017/06/12 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python删除n行后的其他行方法
2019/01/28 Python
详解用python写一个抽奖程序
2019/05/10 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
介绍一下gcc特性
2015/10/31 面试题
大学生村官典型材料
2014/01/12 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
网络信息安全承诺书
2014/03/26 职场文书
听证会主持词
2015/07/03 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python