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>

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

猜你喜欢

转载自blog.csdn.net/jwz934738949/article/details/88535664
0条评论
添加一条新回复