标签：视频 浏览器 触发 前端 video 播放 音频
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>js video</title>
8 </head>
9 <body>
10 <!-- video 属性 -->
11
12 <!-- 禁止下载 controlslist="nodownload" -->
13 <!-- 禁止全屏 controlslist="nofullscreen" -->
14 <!-- 自动播放 autoplay 这个属性不一定生效 -->
15 <!-- 循环播放 loop -->
16 <!-- 预加载 preload -->
17 <!-- 贴图 poster="poster.jpg" -->
18 <!-- 控制器 controls -->
19
20 <!-- 备用地址 -->
21 <video id="video" controls autoplay>
22 <source src="./../download.mp4" type="video/mp4" />
23 </video>
24 <script>
25 // 音量
26 const video = document.getElementById("video");
27 video.volume = 0.3; // 范围 0-1
28
29 // 开始播放的时间
30 video.currentTime = 30; // 单位 s
31
32 video.addEventListener("loadstart", function (e) {
33 console.log(this.duration);
34 });
35
36 // 获取当前播放地址
37 console.log(video.currentSrc); // 我测试没有获取到
38
39 // 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
40 // 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
41 // 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
42 // 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
43 // 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
44 // 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
45 // 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
46 // 8、play：播放监听
47 // 9、pause：暂停监听
48 // 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
49 // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
50 // 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
51 // 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
52 // 14、timeupdate：目前的播放位置已更改时，播放时间更新
53 // 15、ended：播放结束
54 // 16、error：播放错误
55 // 17、volumechange：当音量更改时
56 // 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
57 // 19、ratechange：当视频的播放速度已更改时
58 </script>
59 </body>
60 </html>
标签：视频,
浏览器,
触发,
前端,
video,
播放,
音频
From： https://www.cnblogs.com/aurora-power/p/16906786.html