HTML5音频audio元素

一、音频文件格式
.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

时间: 2024-10-06 14:47:34

HTML5音频audio元素的相关文章

HTML5 音频 &lt;audio&gt;

HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频的标准方法. audio 元素能够播放声音文件或者音频流. 二.使用audio标签 <audio src="song.ogg" controls="controls"> </audio>

HTML5音频audio详解

直到现在,仍然不存在一项旨在网页上播放音频的标准. 目前,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频的标准方法. audio 元素能够播放声音文件或者音频流. 当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √     √ √ Wav   √ √  

HTML5——音频audio与视频video

文件日志地址  http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash (源码截自优酷) 多媒体标签 使用 HTML5增加了audio与video两个多媒体标签 兼容性还不错,低版本IE不支持 可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件 而且非常的简单 (源码截自Bilibili) 元素用法如下 1 <audio src="

HTML5 音频audio 和视频video实用基础教程

1.音频(audio)<audio controls="controls"><source src="这里面放入音频文件路径"></source></audio>2.视频(video) <video controls="controls" loop="loop" autoplay="autoplay" id="video">&l

HTML5音频audio属性

来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral audio 的控制函数主要有: load() 加载音频.视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载play() 加载并播放音频.视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放pause() 暂停处于播放状态的音频.视频文件 audio 的只读媒体特性有: duration 获取媒体文件的播放时

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)

一.在HTML5中播放音频 audio 元素 - audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否自动播放.预加载及循环播放等 - audio元素提供了播放.暂停和音量控件来控制音频 - 使用audio元素提供三种音频格式的文件:MP3.Ogg.Wav - MP3: 采用mpeg音频解码器 - Ogg: 采用ogg音频解码器 - Wav: 采用wav音频解码器 - 语法结构 audio 属性 - audio 元素支持以下属性 - src: 指定播放文件的URL,可通过

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性 定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.

html5 音频和视频(audio And video)

1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持三种视频格式: 格式    IE Firefox Opera Chrome Safari Ogg     No 3.5+ 10.5+  5.0+ No MPEG4 9.0+  No           No 5.

HTML5之音频audio知识

HTML总结(二)[HTML5之音频] HTML5重点知识之音频 audio标签兼容性: Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签. 注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签. audio的常用属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 dura