首页 > 代码库 > HTML5音频audio元素
HTML5音频audio元素
一、音频文件格式
.ogg/.mp3/.wav/.aac/.mp4/.opus,最后一种新的音频文件格式,在本书写作之时只有 Firefox 支持。
对于音频,最好的两种格式是 Ogg 和 MP3。
二、在网页中添加带控件的单个音频文件
<audio src=http://www.mamicode.com/"my-audio.ext" autoplay controls muted loop preload></audio>
注意,包含 autoplay 属性会覆盖 preload 属性的设置,因为只有加载音频文件才能播放。
三、提供带备用内容的多个音频源
为了获得所有兼容 HTML5 的浏览器的支持,至少需要为音频提供两种格式。
<audio controls>
<source src="http://www.mamicode.com/piano.ogg" type="audio/ogg">
<source src="http://www.mamicode.com/piano.mp3" type="audio/mp3">
<p>Your browser doesn‘t support HTML5 audio, but you can <a href="http://www.mamicode.com/piano.mp3">download the audio file</a> (MP3, 1.3 MB).</p>
</audio>
type 属性可以帮助浏览器判断它是否能播放某个文件。对音频文件来说,其值总是 audio/ 加上格式本身,包括 audio/ogg、 audio/mp3、 audio/aac、 audio/wav 和audio/mp4。
三、添加具有备用 Flash 的视频和音频
参考:使用John Dyer 的 MediaElement.js(http://mediaelementjs.com)演示如何嵌 入flash。
要让 MediaElement.js与原生视频和音频一起运行,需要做一些额外的工作。首先,需要获取 MediaElement.js 文件,将它们放到网站文件夹里。然后将其中的一些文件放到网页里。其步骤为:
1. 获取 MediaElement.js 文件,并将文件包括在网站目录中
(1) 访问 http://mediaelementjs.com。点击Download Latest 按钮,下载 ZIP 包。
复制build 文件夹(如图 17.13.2 所示),再粘贴到网站文件夹。
2. 为网页添加 MediaElement.js
3. 为视频添加备用 Flash 的步骤
<!-- 以下代码要放在所有内容下面 -->
<script>
$(‘video‘).mediaelementplayer();
</script>
或者
<!-- 下面的代码放在所有内容之后 -->
<script>
$(‘audio‘).mediaelementplayer();
</script>
如果页面同时包含了视频和音频,那么需要修改页面询问的脚本如下:
<script>
$(‘audio,video‘).mediaelementplayer();
</script>
</body>
</html>
PS:Internet Explorer 8 等 浏 览 器 会 忽 略audio 和 source 元素,直接使用备用 Flash 播放器。只要用户安装了 Flash,就能播放视频或音频内容。
高级多媒体
使用 HTML5 原生多媒体的另一个好处是可以利用很多来自 HTML5 或与 HTML5 相关的新特性和新功能。本节主要讨论其中的两个: canvas 元素和 SVG。
【参考资源】
其 他 的 Flash 播 放 解 决 方 案 包 括
1、Video.js(www.videojs.com)、 JW Player(www.longtailvideo.com/jw-player/)、 Flowplayer(http://flowplayer.org) 等。 JW Player 和
Flowplayer 的免费版本会在媒体播放器上显示它们的标识。
2、?“ Video on the Web”( http://diveinto.html5doctor.com/video.html)
3、?“ WebVTT and Video Subtitles”(www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles)
4、?“ HTML5 Canvas: The Basics”(http://dev.opera.com/articles/view/html-5-canvas-the-basics)
5、’?“ Learning SVG”(http://my.opera.com/tagawa/blog/learning-svg)
HTML5音频audio元素