# 8.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>
<video id="video" src="./test.mp4" width="400" height="225" controls controlslist="nodownload nofullscreen"></video>
<script>
var v = document.getElementById('video')
console.log('v.duration', v.duration)
// loadstart 视频查找
v.addEventListener('loadstart', function(e) {
console.log('loadstart', v.duration)
})
// durationchange 时长变化
v.addEventListener('durationchange', function(e){
console.log('durationchange', v.duration)
})
// loadedmetadata 元数据加载
v.addEventListener('loadedmetadata', function(e){
console.log('loadedmetadata')
})
// loadeddata 说明当前没有足够的视频帧和音频帧去播放, 需要去下载
v.addEventListener('loadeddata', function(e){
console.log('loadeddata')
})
// progress 视频或音频下载监听
v.addEventListener('progress', function(e){
console.log('progress')
})
// canplay 可播放监听(告诉我已经有帧可以播放)
v.addEventListener('canplay', function(e){
console.log('canplay')
})
// canplaythrough 告诉我可以流畅的播放了
v.addEventListener('canplaythrough', function(e){
console.log('canplaythrough')
})
// 如果需要通过程序控制视频的播放和暂停, 需要监听 canplay 或 canplaythrough
// 获取video, 调用video.play(), 有的时候会卡住并没有播放, 因为你 调用play()方法, 还没有足够的视频或音频去播放, 之后视频或音频加载完, 又不会自动播放,这就是视频卡住的原因
// play 播放监听
v.addEventListener('play', function(e){
console.log('play')
})
// pause 暂停监听
v.addEventListener('pause', function(e){
console.log('pause')
})
// seeking 查找开始 监听用户拖动视频进度条的行为
v.addEventListener('seeking', function(e){
console.log('seeking')
})
// seeked 查找结束 (比较关键) 决定当前视频可播放 在canplay之前触发
v.addEventListener('seeked', function(e){
console.log('seeked')
})
// waiting 视频加载等待 画面无法解码 从播放状态到暂停会触发
v.addEventListener('waiting', function(e){
console.log('waiting')
})
// playing 从未播放到播放 会进行触发
v.addEventListener('playing', function(e){
console.log('playing')
})
// timeupdate 播放实时更新 (制作自定义进度条会用得上)
v.addEventListener('timeupdate', function(e){
console.log('timeupdate')
})
// ended 视频播放结束 (商业行为: 视频播放完插播一条广告)
v.addEventListener('ended', function(e){
console.log('ended')
})
// error 视频播放报错(比如断网)
v.addEventListener('error', function(e){
console.log('error')
})
</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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82