开发手册 欢迎您!
软件开发者资料库

HTML5 - 音频和视频

HTML5音频和视频 - 通过简单简单的步骤学习HTML 5,其中包括2D画布,音频,视频,新语义元素,地理定位,持久本地存储,Web存储,Web SQL,Forms 2.0,微数据和拖放,IndexedDB, Web消息传递,CORS,Web RTC,画布绘制矩形,Web存储,服务器发送事件,Web画布,Web工作者,幻灯片。

HTML5功能包括原生音频和视频支持,无需使用Flash.

HTML5< audio>和<视频>标签使得向网站添加媒体变得简单.您需要设置 src 属性以标识媒体源并包含控件属性,以便用户可以播放和暂停媒体.

嵌入视频

以下是在您的网页中嵌入视频文件的最简单形式 :

   Your browser does not support the 


当前的HTML5草案规范未指定浏览器应在视频标记中支持哪些视频格式.但最常用的视频格式为 :

  • Ogg : 带有Thedora视频编解码器和Vorbis音频编解码器的Ogg文件.

  • mpeg4 : 带有H.264视频编解码器和AAC音频编解码器的MPEG4文件.

您可以使用< source>标签以指定媒体以及媒体类型和许多其他属性.视频元素允许多个源元素,浏览器将使用第一个识别的格式 :

                                          Your browser does not support the          


视频属性规范

HTML5视频标签可以具有许多属性,以控制控件的外观和感觉以及各种功能

Sr.No.Attribute & Description
1

autoplay

如果指定了此布尔属性,则视频将自动开始播放,而不会停止完成加载数据。

2

autobuffer

如果指定了此布尔属性,则即使未将视频设置为自动播放,视频也将自动开始缓冲。

3

controls

如果存在此属性,它将允许用户控制视频播放,包括音量,搜索和暂停/继续播放。

4

height

该属性指定视频显示区域的高度,以CSS像素为单位。

5

loop

如果指定了此布尔属性,则视频将在到达终点后自动返回起点。

6

preload

此属性指定视频将在页面加载时加载,并准备运行。 忽略是否存在自动播放。

7

poster

这是要显示的图像的URL,直到用户播放或搜索为止。

8

src

嵌入视频的URL。 这是可选的; 您可以改用video块中的元素来指定要嵌入的视频

9

width

此属性指定视频显示区域的宽度,以CSS像素为单位。

嵌入音频

HTML5支持

   Your browser does not support the 

当前的HTML5规范草案未在音频标签中指定浏览器应支持的音频格式。 但最常用的音频格式是ogg,mp3和wav。

您可以使用标签以指定媒体以及媒体类型和许多其他属性。 音频元素允许多个源元素,并且浏览器将使用第一种公认的格式

                                          Your browser does not support the          

音频属性规范

HTML5音频标签可以具有许多属性来控制控件的外观和感觉以及各种功能

Sr.No.Attribute & Description
1

autoplay

如果指定了此布尔属性,则音频将自动开始播放,而不会停止完成加载数据。

2

autobuffer

如果指定了此布尔属性,则即使未将其设置为自动播放,音频也将自动开始缓冲。

3

controls

如果存在此属性,它将允许用户控制音频播放,包括音量,搜索和暂停/继续播放。

4

loop

如果指定了此布尔属性,则音频将在到达终点后自动返回起点。

5

preload

此属性指定音频将在页面加载时加载,并准备运行。 忽略是否存在自动播放。

6

src

要嵌入的音频的URL。 这是可选的; 您可以改用video块中的元素来指定要嵌入的视频

处理媒体事件

HTML5音频和视频标签可以具有许多属性,以使用JavaScript控制控件的各种功能

S.No.Event & Description
1

abort

播放中止时将生成此事件。

2

canplay

当有足够的可用数据可以播放媒体时,将生成此事件。

3

ended

播放完成时生成此事件。

4

error

发生错误时将生成此事件。

5

loadeddata

当媒体的第一帧完成加载时,将生成此事件。

6

loadstart

开始加载媒体时会生成此事件。

7

pause

暂停播放时会生成此事件。

8

play

回放开始或恢复时会生成此事件。

9

progress

定期生成此事件,以通知媒体下载进度。

10

ratechange

播放速度更改时会生成此事件。

11

seeked

查找操作完成时,将生成此事件。

12

seeking

查找操作开始时,将生成此事件。

13

suspend

暂停媒体加载时会生成此事件。

14

volumechange

音量改变时会生成此事件。

15

waiting

当请求的操作(例如播放)被延迟以等待另一个操作(例如搜寻)完成之前,将生成此事件。

以下是允许播放给定视频的示例

                     function PlayVideo() {            var v = document.getElementsByTagName("video")[0];              v.play();          }                        
                           Your browser does not support the video element.                                          


配置媒体类型的服务器

最默认情况下,服务器不会为具有正确MIME类型的Ogg或mp4媒体提供服务,因此您可能需要为此添加适当的配置.

AddType audio/ogg .ogaAddType audio/wav .wavAddType video/ogg .ogv .oggAddType video/mp4 .mp4
})();