HTML5功能包括原生音频和视频支持,无需使用Flash.
HTML5< audio>和<视频>标签使得向网站添加媒体变得简单.您需要设置 src 属性以标识媒体源并包含控件属性,以便用户可以播放和暂停媒体.
嵌入视频
以下是在您的网页中嵌入视频文件的最简单形式 :
当前的HTML5草案规范未指定浏览器应在视频标记中支持哪些视频格式.但最常用的视频格式为 :
您可以使用< source>标签以指定媒体以及媒体类型和许多其他属性.视频元素允许多个源元素,浏览器将使用第一个识别的格式 :
Your browser does not support the element.
视频属性规范
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支持
当前的HTML5规范草案未在音频标签中指定浏览器应支持的音频格式。 但最常用的音频格式是ogg,mp3和wav。
您可以使用
Your browser does not support the element.
音频属性规范
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 当请求的操作(例如播放)被延迟以等待另一个操作(例如搜寻)完成之前,将生成此事件。 |
以下是允许播放给定视频的示例
配置媒体类型的服务器
最默认情况下,服务器不会为具有正确MIME类型的Ogg或mp4媒体提供服务,因此您可能需要为此添加适当的配置.
AddType audio/ogg .ogaAddType audio/wav .wavAddType video/ogg .ogv .oggAddType video/mp4 .mp4