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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 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.ini中文版
2006/10/09 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python调用java的Webservice示例
2014/03/10 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
分享vim python缩进等一些配置
2018/07/02 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python抖音表白程序源代码
2019/04/07 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
详解python中的index函数用法
2019/08/06 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
大学四年的个人自我评价
2014/01/14 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
运动会横幅标语
2014/06/17 职场文书
英语专业求职信
2014/07/08 职场文书
六年级小学生评语
2014/12/26 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL