HTML5功能包括原生音频和视频支持,无需使用flash.
HTML5< audio>和<视频>标签使得向网站添加媒体变得简单.您需要设置 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文件.
您可以使用< source>标签以指定媒体以及媒体类型和许多其他属性.视频元素允许多个源元素,浏览器将使用第一个识别的格式 :
<!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. | Attribute & Description |
---|---|
1 |
autoplay 如果指定了此布尔属性,则视频将自动开始播放,而不会停止完成加载数据。 |
2 |
autobuffer 如果指定了此布尔属性,则即使未将视频设置为自动播放,视频也将自动开始缓冲。 |
3 |
controls 如果存在此属性,它将允许用户控制视频播放,包括音量,搜索和暂停/继续播放。 |
4 |
height 该属性指定视频显示区域的高度,以CSS像素为单位。 |
5 |
loop 如果指定了此布尔属性,则视频将在到达终点后自动返回起点。 |
6 |
preload 此属性指定视频将在页面加载时加载,并准备运行。 忽略是否存在自动播放。 |
7 |
poster 这是要显示的图像的URL,直到用户播放或搜索为止。 |
8 |
src 嵌入视频的URL。 这是可选的; 您可以改用video块中的<source>元素来指定要嵌入的视频。 |
9 |
width 此属性指定视频显示区域的宽度,以CSS像素为单位。 |
嵌入音频
HTML5支持<audio>标签,该标签用于将声音内容嵌入HTML或XHTML文档中,如下所示。
<audio src = "foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio>
当前的HTML5规范草案未在音频标签中指定浏览器应支持的音频格式。 但最常用的音频格式是ogg,mp3和wav。
您可以使用<source>标签以指定媒体以及媒体类型和许多其他属性。 音频元素允许多个源元素,并且浏览器将使用第一种公认的格式
<!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. | Attribute & Description |
---|---|
1 |
autoplay 如果指定了此布尔属性,则音频将自动开始播放,而不会停止完成加载数据。 |
2 |
autobuffer 如果指定了此布尔属性,则即使未将其设置为自动播放,音频也将自动开始缓冲。 |
3 |
controls 如果存在此属性,它将允许用户控制音频播放,包括音量,搜索和暂停/继续播放。 |
4 |
loop 如果指定了此布尔属性,则音频将在到达终点后自动返回起点。 |
5 |
preload 此属性指定音频将在页面加载时加载,并准备运行。 忽略是否存在自动播放。 |
6 |
src 要嵌入的音频的URL。 这是可选的; 您可以改用video块中的<source>元素来指定要嵌入的视频。 |
处理媒体事件
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 当请求的操作(例如播放)被延迟以等待另一个操作(例如搜寻)完成之前,将生成此事件。 |
以下是允许播放给定视频的示例
<!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