掌握HTML5中的多媒体--音频(audio)

简介: 使用音频标签 音频标签的使用和视频是非常相似的:指定多个音频文件,浏览器会播放其中支持的第一个。 1.       2.       你的浏览器不支持标签. 3.         Figure 5列出了所有可用的属性. 因为不需要像视频播放器那样显示整个控件,所以高、低和预览图(poster)都不再需要了。

使用音频标签<audio>

音频标签的使用和视频是非常相似的:指定多个音频文件,浏览器会播放其中支持的第一个。

1.       <audio src="audio.ogg" controls>

2.       你的浏览器不支持<audio>标签.

3.       </audio>

 

Figure 5列出了所有<audio>可用的属性. 因为不需要像视频播放器那样显示整个控件,所以高、低和预览图(poster)都不再需要了。

Figure 5 音频标签<audio>的属性

Attribute

Value

Description

 Autoplay

autoplay

如果指定, 音频会在准备好后立即播放.

 Controls

controls

显示播放控制工具栏..

 Loop

loop

如果指定,则循环播放.

 Preload

preload

如果指定,频会在加页面加载过程中被加载。当Autoplay被指定时,会被忽略。

 Src

url

目标音频的URL.

 

和视频<video>标签一样,你可以指定多个文件,浏览器会播放其中支持的第一个文件。你也可以指定一个回退(fallback)信息以供浏览器不支持<audio>标签时显示。下面是一个简单的例子:

1.       <audio controls autoplay>

2.          <source src="audio1.ogg" type="audio/ogg" />

3.          <source src="audio1.mp3" type="audio/mpeg" />

4.           你的浏览器不支持<audio>标签.

5.       </audio>

 

总结

当前在HTML5多媒体方面最大的问题是你必须为不同的浏览器提供不同格式的文件,不过它的应用也是大势所趋。以下是一些很棒的参考内容:

参考:掌握HTML5中的多媒体--视频(video)

原文地址:Working with Media in HTML5

作者:Jason Beres

转载请注明出处:http://blog.csdn.net/horkychen

目录
相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
|
3月前
|
存储 移动开发 前端开发
HTML5列表标签、多媒体和语义化标签
列表标签、多媒体和语义化标签
45 0
|
3月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
45 0
|
9月前
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
153 0
|
5月前
|
移动开发 HTML5
HTML5之audio标签介绍
HTML5之audio标签介绍
33 1
|
10月前
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
|
11月前
|
移动开发 前端开发 JavaScript
前端祖传三件套HTML的HTML5之新多媒体元素 audio/video
HTML5 是 Web 技术的重要更新,它引入了许多新特性,其中包括一些新的多媒体元素。这些新元素包括音频和视频,让 Web 开发者可以更方便地在网站上添加多媒体内容。
120 0
|
12月前
HTML 学习笔记——插入音频、视频标签
audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时,默认情况下不允许用户自己控制播放按钮。
93 0
|
移动开发 HTML5
html5中audio属性和方法
<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条
151 0