视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此,WhatWG 提议引入一个新的 video 元素,用来嵌入任意视频格式。例如,可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”:
<video src="http://www.css3-html5.com/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>
分享到:
相关推荐
4. **Video和Audio元素**:HTML5直接支持内嵌视频和音频,无需Flash等插件,用户可以直接在浏览器中播放媒体文件。 5. **离线存储(Application Cache)**:通过离线存储,网页可以缓存必要的资源,使得用户在离线...
本课程是基于尚硅谷李立超老师的Web前端零基础入门HTML5+CSS3基础教程,旨在帮助初学者掌握HTML5的基本概念和语法。 首先,HTML(HyperText Markup Language)是一种标记语言,用于构建和呈现网页内容。HTML5作为...
在媒体支持方面,HTML5新增了和标签,使网页可以直接内嵌音频和视频内容,无需依赖Flash等插件。配合标签,可以指定不同格式的源文件,以适应不同的浏览器。此外,标签则用于添加字幕、章节等辅助内容。 表单控件也...
在"HTML5+CSS3网站设计基础教程_动手实践源代码"这个资源中,你将学习到以下关键知识点: 1. **HTML5新特性**:包括新的结构元素(如、、、、和),用于更好地组织网页内容;离线存储(AppCache)以提高离线访问...
响应式 Web 开发项目教程(HTML5+CSS3+Bootstrap)第 2 版第 1 章 HTML5+CSS3 初体验课后练习 本资源涉及到的知识点包括 HTML5、CSS3、Bootstrap 等响应式 Web 开发技术。下面是对每个知识点的详细解释: 一、 ...
在"HTML5+CSS3网站设计基础教程(第2版)"中,读者可以学习到如何利用这两种语言构建功能强大且视觉效果出众的网站。 HTML5作为新一代的超文本标记语言,引入了许多新的元素和属性,旨在简化网页结构,提高语义化,...
本教程旨在帮助初学者掌握HTML5的基础知识和核心特性,从而能够创建功能丰富的、响应式的网页。 一、HTML5简介 HTML5是HTML的最新版本,它对之前的HTML4进行了许多改进和扩展。其中,最显著的变化是引入了新的元素...
4. **SVG矢量图**:HTML5支持内嵌SVG(Scalable Vector Graphics),可以创建高质量的可缩放矢量图像,适合用于图标和复杂图形。 5. **多媒体支持**:HTML5的和元素使得在网页中直接播放音频和视频变得简单,不再...
2. **媒体元素**:HTML5支持和元素,使得内嵌音频和视频变得更加简单,无需依赖Flash或其他插件。 3. **离线存储**:通过离线存储(离线Web应用程序,Web Storage)特性,可以将部分网站数据存储在本地,使得用户在...
总之,这个"HTML5+CSS3+JS入门教程"结合源代码,是一个全面学习网页开发的好资源,适合想要入门前端开发的初学者。通过系统学习,你可以掌握构建现代网页所需的核心技术,并有能力开发出富有吸引力且功能丰富的网站...
2. SVG矢量图:SVG是一种可缩放的矢量图形格式,HTML5支持内嵌SVG,使得图形可以无损缩放且文件体积小。 3. Web Storage:提供了localStorage和sessionStorage,用于在浏览器端存储数据,替代了传统的Cookie。 4. ...
4. **SVG矢量图**:HTML5支持内嵌SVG(Scalable Vector Graphics),允许创建可缩放的矢量图形,这在响应式设计中尤其有用,因为它们可以无损地缩放,不会失真。 5. **Web Storage**:HTML5提供了localStorage和...
HTML5是超文本标记语言HTML的第五个重大版本,而CSS3则是层叠样式表(Cascading Style Sheets)的最新迭代。本视频教程涵盖了这两个领域的广泛内容,共计227讲,旨在帮助学习者全面掌握这两项技术。 HTML5在HTML4的...
HTML5是超文本标记语言的第五版,是网页开发的标准,尤其在移动设备上具有广泛的应用。它引入了许多新的元素和API,增强了网页的交互性和多媒体支持。例如,`<canvas>`元素提供了动态图形绘制功能,用于创建这款游戏...
HTML 5 将带来什么?以下是 HTML 5 草案中最激动人心的部分: 全新的,更合理的 Tag,多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频 的 Tag,音频有音频的 Tag。本地数据库。这个功能将内嵌一个...
【HTML5技术】:HTML5是超文本标记语言的第五个版本,它增强了网页的多媒体功能,支持音频、视频、图形和动画等元素的内嵌,同时提供了离线存储、拖放功能、表单控制等新特性,使得开发更复杂的Web应用成为可能。...
HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它在HTML4的基础上做了大量的改进和扩展。HTML5的引入旨在提高网页的互操作性和可用性,同时简化了语法。以下是一些HTML5的关键特性: 1. **语义...
此外,HTML5还增强了音频和视频处理能力,使得直接在网页中内嵌多媒体资源变得更加简单。 CSS3的媒体查询是实现响应式设计的关键,通过定义在特定屏幕尺寸下的样式规则,我们可以让网页根据设备的不同特性自动变换...
4. SVG矢量图:HTML5支持内嵌SVG(Scalable Vector Graphics)图像,提供高质量的图形展示,且图像可缩放不失真。SVG也可以通过JavaScript进行动态操作。 5. Web存储:HTML5的`localStorage`和`sessionStorage`提供...
这个"HTML5实战开发教程"涵盖了HTML5的基础到高级应用,旨在帮助开发者充分利用HTML5的新特性进行网页和应用的构建。 在HTML5中,一些关键知识点包括: 1. **语义化元素**:HTML5引入了诸如、、、和等语义化元素,...