# 7.Video属性详解
# video.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video 详解</title>
</head>
<body>
<!-- 基础用法 -->
<!-- nodownload: 不允许下载 -->
<!-- nofullscreen: 不允许全屏 -->
<!-- <video src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video> -->
<!-- poster: 贴图 -->
<!-- <video src="./test.mp4" width="400" height="225" controls poster="./test.jpg"></video> -->
<!-- autoplay: 自动播放 -->
<!-- <video src="./test.mp4" width="400" height="225" autoplay controls poster="./test.jpg"></video> -->
<!-- muted: 静音 -->
<!-- <video src="./test.mp4" width="400" height="225" muted controls poster="./test.jpg"></video> -->
<!-- loop: 循环播放 -->
<!-- <video src="./test.mp4" width="400" height="225" loop muted controls poster="./test.jpg"></video> -->
<!-- preload: 预加载 -->
<!-- <video src="./test.mp4" width="400" height="225" preload controls poster="./test.jpg"></video> -->
<!-- volume: 音量控制 -->
<!-- <video src="./test.mp4" id="_volume" width="400" height="225" controls poster="./test.jpg"></video>
<script>
var v = document.getElementById('_volume')
v.volume = 0.5
</script> -->
<!-- 播放时间的控制 -->
<!-- <video src="./test.mp4" id="_time" width="400" height="225" controls poster="./test.jpg"></video>
<script>
var v = document.getElementById('_time')
console.log(v.currentTime)
v.currentTime = 60 // 单位: 秒
</script> -->
<!-- 播放地址的切换 比如清晰度切换: 高清/超清 -->
<!-- <video src="./test.mp4" id="_src" width="400" height="225" controls poster="./test.jpg"></video>
<script>
var v = document.getElementById('_src')
console.log(v.src)
setTimeout(()=> {
v.src='./test-2.mp4'
},2000)
</script> -->
<!-- 备用地址切换 -->
<video id="_source" controls poster="./test.jpg" width="400" height="225">
<source src="./test.mp4" type="video/mp4">
<source src="./test-2.mp4" type="video/mp4">
</video>
<script>
var v = document.getElementById('_source')
setTimeout(() => {
console.log('src', v.currentSrc)
},1000)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
← 6.直播原理总结 8.Video事件详解 →