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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
人民调解员先进事迹材料
2014/05/08 职场文书
邀请函样本
2015/02/02 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js