video元素和audio元素

内容：

1.video元素

2.audio元素

注：这两个元素均是HTML5新增的元素

1.video元素

(1)用途

<video> 标签定义视频，比如电影片段或其他视频流

(2)标签属性

(3)实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title>video标签</title>
 7 </head>
 8 <body>
 9 
10 <!-- 自动播放 有播放控件 宽600px 高400px -->
11 <video src="xxx.mp4" controls="controls" autoplay="autoplay" width="600" height="500">
12     <!-- 当浏览器不支持video标签时显示如下文字 -->
13     your browser does not support the video tag
14 </video>
15 
16 </body>
17 </html>

(4)补充 - source元素与编码格式

source元素指定多个播放格式与编码：source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择都所支持的格式为止。其使用方法如下：

1 <video>
2     <source src="video.m4v" type="video/mp4" />
3     <source src="video.webm" type="video/webm" />
4     <source src="video.ogv" type="video/ogg" />
5     <source src="video.mp4" />
6 </video>

各种设备对于编码格式的支持：

webm(.webm)格式的视频：Firefox4.0以上、chrome6.0以上、Opera10.6以上；
mp4(.m4v)格式的视频：IE9.0以上、Safari3.1以上、iso5.0以上、Android4.0以上；
ogg(.ogv)格式的视频：Firefox3.5以上、chrome3.0以上、Opera10.5以上；
mp4(.mp4)格式的视频：IE9.0以上、Safari3.1以上、iso3.0以上、Android2.3以上；

2.audio元素

(1)用途

<audio> 标签定义声音，比如音乐或其他音频流

(2)标签属性

(3)实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title>audio标签</title>
 7 </head>
 8 <body>
 9 
10 <!-- 自动播放 带播放控件 -->
11 <audio src="xxx.wav" controls="controls" autoplay="autoplay">
12     <!-- 当浏览器不支持audio标签时显示如下文字 -->
13     your browser does not support the audio tag
14 </audio>
15 
16 </body>
17 </html>

video元素和audio元素

猜你喜欢