HTML5音频audio元素

标签：格式   htm   tor   basic   get   com   play   页面   build   

一、音频文件格式
.ogg/.mp3/.wav/.aac/.mp4/.opus，最后一种新的音频文件格式，在本书写作之时只有 Firefox 支持。
对于音频，最好的两种格式是 Ogg 和 MP3。

二、在网页中添加带控件的单个音频文件
<audio src="my-audio.ext" autoplay controls muted loop preload></audio>
注意，包含 autoplay 属性会覆盖 preload 属性的设置，因为只有加载音频文件才能播放。

三、提供带备用内容的多个音频源
     为了获得所有兼容 HTML5 的浏览器的支持，至少需要为音频提供两种格式。
<audio controls>
    <source src="piano.ogg"  type="audio/ogg">
    <source src="piano.mp3"  type="audio/mp3">
    <p>Your browser doesn‘t support HTML5 audio, but you can <a href="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元素

标签：格式   htm   tor   basic   get   com   play   页面   build   

原文地址：http://www.cnblogs.com/webStudy2016/p/6218914.html