video标签

video标签：在网页中插入可以播放的视频

1.autoplay：video的一个属性，使得打开网页后视频可以自动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" autoplay="autoplay"></video>
</body>
</html>

2.controls：在视频中添加进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" controls="controls"></video>
</body>
</html>

3.poster：当视频没有播放时，在视频界面加入一个图片来占据视频的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" poster="111.jpg"></video>
</body>
</html>

4.loop：循环播放视频，一般用于网页中的广告视频播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" autoplay="autoplay" loop></video>
</body>
</html>

5.muted：让视频静音

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" muted></video>
</body>
</html>

6.width/height：控制视频的高度与宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video src="video1.webm" width="500" height="400"></video>
</body>
</html>

但是不同的视频有着不同的格式，每种格式所支持的浏览器也不同。
来自http://www.w3school.com.cn/html5/html_5_video.asp
当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG	4	9.0+	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
video的另一种格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单列表</title>
</head>
<body>
<video>
    <source scr="1.webm" type="video/webm"></video>
    <source scr="2.mp4" type="video/mp4"></video>
    <source scr="3.ogg" type="video/ogg"></video>
</video>
</body>
</html>

通过这种方式可以随时更换视频的格式，更加方便的适应各大浏览器。

video标签：在网页中插入可以播放的视频

猜你喜欢