音频和视频（Audio & Video）

优质

小牛编辑

133浏览

2023-12-01

HTML5功能包括本机音频和视频支持，无需使用Flash。

HTML5您需要设置src属性以标识媒体源并包含控件属性，以便用户可以播放和暂停媒体。

嵌入视频

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

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

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

Ogg - 带有Thedora视频编解码器和Vorbis音频编解码器的Ogg文件。
mpeg4 - 带有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

您可以使用标记指定媒体以及媒体类型和许多其他属性。视频元素允许多个源元素，浏览器将使用第一个识别的格式 -

<!DOCTYPE HTML>
<html>
   <body>
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
   </body>
</html>

视频属性规范

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

Sr.No.	属性和描述
1	autoplay 如果指定了此布尔属性，视频将在不停止完成加载数据的情况下自动开始播放。
2	autobuffer 如果指定此布尔属性，即使视频未设置为自动播放，视频也会自动开始缓冲。
3	controls 如果存在此属性，则允许用户控制视频播放，包括音量，搜索和暂停/恢复播放。
4	height 此属性以CSS像素为单位指定视频显示区域的高度。
5	loop 如果指定了此布尔属性，则允许视频在到达结束后自动搜索到开始。
6	preload 此属性指定视频将在页面加载时加载，并准备运行。如果存在自动播放，则忽略。
7	poster 这是在用户播放或搜索之前显示的图像的URL。
8	src 要嵌入的视频的网址。这是可选的; 您可以改为使用视频块中的元素来指定要嵌入的视频。
9	width 此属性以CSS像素为单位指定视频显示区域的宽度。

嵌入音频

HTML5支持

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

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

你可以使用标记以指定媒体以及媒体类型和许多其他属性。音频元素允许多个源元素，浏览器将使用第一个识别的格式 -

<!DOCTYPE HTML>
<html>
   <body>
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
   </body>
</html>

音频属性规范

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

Sr.No.	属性和描述
1	autoplay 如果指定了此布尔属性，音频将在不停止完成加载数据的情况下自动开始播放。
2	autobuffer 如果指定此布尔属性，即使音频未设置为自动播放，音频也会自动开始缓冲。
3	controls 如果存在此属性，则允许用户控制音频播放，包括音量，搜索和暂停/恢复播放。
4	loop 如果指定了此布尔属性，则允许音频在到达结尾后自动回溯到开头。
5	preload 此属性指定音频将在页面加载时加载，并准备运行。如果存在自动播放，则忽略。
6	src 要嵌入的音频的URL。这是可选的; 您可以改为使用视频块中的元素来指定要嵌入的视频。

处理媒体事件

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

S.No.	活动和描述
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 当所请求的操作（例如回放）被延迟等待另一操作（例如搜索）的完成时，产生该事件。

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

<!DOCTYPE HTML>
<html>
   <head>
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   <body>
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
   </body>
</html>

配置媒体类型的服务器

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

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4