普歌-非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件_app\videoweb\controller\videoplay->jm()

实现自定义video播放视频控件，详解video中JS的api

最后的效果（还有控制音量，开关声音，因为赶时间，没做上，会在本篇文章中说，怎么控制）

先上基础知识

• video的标签属性

• video的API属性

• 对于api的演示

/* 暂停 */
video.play(); 

/* 播放 */
video.pause(); 
/* 音量控制 */
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）

 /* 播放时间控制 */
    console.log(video.currentTime)  // 视频当前正在播放的时间（单位：s），进度条拖到哪就显示当前的时间
    video.currentTime = 60  // 默认从60秒处开始播放

 /* 播放地址切换 （常见于切换超清  高清 流畅，不同画质的视频地址不同） */
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址，DOM 中是相对地址
    // video.src = 'test-2.mp4'   // 直接替换掉了原来的视频src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的时候，自动切换视频
    }, 30000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

事件触发

// 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
    video.addEventListener('loadstart', function(e) {
      console.log('提示视频的元数据已加载')
      console.log(e)
      console.log(video.duration)            // NaN
    })

    // 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
    video.addEventListener('durationchange', function(e) {
      console.log('提示视频的时长已改变')
      console.log(e)
      console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）
    })

    // 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
    video.addEventListener('loadedmetadata', function(e) {
      console.log('提示视频的元数据已加载')
      console.log(e)
    })

    // 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
    video.addEventListener('loadeddata', function(e) {
      console.log('提示当前帧的数据是可用的')
      console.log(e)
    })

    // 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
    video.addEventListener('progress', function(e) {
      console.log('提示视频正在下载中')
      console.log(e)
    })

    // 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
    video.addEventListener('canplay', function(e) {
      console.log('提示该视频已准备好开始播放')
      console.log(e)
    })

    // 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
    video.addEventListener('canplaythrough', function(e) {
      console.log('提示视频能够不停顿地一直播放')
      console.log(e)
    })

    // 8、play：播放监听
    video.addEventListener('play', function(e) {
      console.log('提示该视频正在播放中')
      console.log(e)
    })

    // 9、pause：暂停监听
    video.addEventListener('pause', function(e) {
      console.log('暂停播放')
      console.log(e)
    })

    // 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
    video.addEventListener('seeking', function(e) {
      console.log('开始移动进度条')
      console.log(e)
    })

    // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
    video.addEventListener('seeked', function(e) {
      console.log('进度条已经移动到了新的位置')
      console.log(e)
    })

    // 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
    video.addEventListener('waiting', function(e) {
      console.log('视频加载等待')
      console.log(e)
    })

    // 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 14、timeupdate：目前的播放位置已更改时，播放时间更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 15、ended：播放结束
    video.addEventListener('ended', function(e) {
      console.log('视频播放完了')
      console.log(e)
    })

    // 16、error：播放错误
    video.addEventListener('error', function(e) {
      console.log('视频出错了')
      console.log(e)
    })

    // 17、volumechange：当音量更改时
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

    // 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
    video.addEventListener('stalled', function(e) {
      console.log('stalled')
      console.log(e)
    })

    // 19、ratechange：当视频的播放速度已更改时
    video.addEventListener('ratechange', function(e) {
      console.log('ratechange')
      console.log(e)
    })
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

demo代码，自制一个网站简单的播放控件

温馨提示
实现需要用到jQuery，svg标签是iconfont图标(矢量图标)

---

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放</title>
    <!--    引入网站图标   -->
    <link rel="icon" href="../images/favicon.ico" />
    <!--    重置默认样式   -->
    <link rel="stylesheet" href="../css/reset.css" />
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../css/videoPlay/videoPlay.css" />
    <script src="../js/iconfont.js"></script>
  </head>
  <body class="videoBody">
  <!-- 返回的标签-->
    <div class="videoBack">
      <div class="back">
        <div class="clickback">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fanhuishangyiye"></use>
          </svg>
          返回
        </div>
        <div class="tit">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-arrow-right"></use>
          </svg>
        </div>
      </div>
    </div>
    <!--播放部分-->
    <div class="player">
      <video id="myVideo" src="../images/videoPlay.mp4"></video>
      <div class="controls">
        <!-- 播放 -->
        <a href="javascript:;" class="switch fa fa-play">
         <!--播放按钮-->
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-bofang1"></use>
          </svg>
           <!--暂停按钮-->
          <svg class="icon bofang" aria-hidden="true" style="display: none">
            <use xlink:href="#icon-bofang2"></use>
          </svg>
        </a>
        <div class="times">
          <span class="current">00:00:00</span>/
          <span class="totalTime">00:00:00</span>
        </div>
        <a href="javascript:;" class="expend fa fa-expand">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanping"></use>
          </svg>
        </a>
        <div class="progress">
          <div class="line"></div>
          <div class="bar"></div>
        </div>
        <select id="select">
          <option value="0.5">0.5x</option>
          <option value="1" selected>1.0x</option>
          <option value="1.25">1.25x</option>
          <option value="1.5">1.5x</option>
          <option value="2">2.0x</option>
        </select>
      </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/videoPlay.js"></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

videoPlay.js

$(function () {
  //计算视频的高度
  var videoHeight = $(".player").height() - $(".controls").height();
  var bodyWidth = window.innerWidth;
  console.log(bodyWidth);
  $("video").css("height", videoHeight + "px");
  $(".videoBody").css("minWidth", bodyWidth + "px");
  console.log($("body").css("minWidth"));
  //返回上一级
  $(".videoBack .clickback").click(function () {
    window.history.back(1);
  });

  //获取视频对象 H5写法
  var myVideo = document.querySelector("#myVideo");

  //播放或暂停
  document.querySelector(".switch").addEventListener("click", function () {
    //判断当前视频是否暂停
    if (myVideo.paused) {
      $(".zanting").css("display", "none");
      myVideo.play(); //播放
      $(".bofang").css("display", "block");
    } else {
      $(".zanting").css("display", "block");
      $(".bofang").css("display", "none");

      myVideo.pause(); //暂停
    }
  });

  //更改视频的速度
  var select = document.getElementById("select");
  // 改变播放速率
  select.addEventListener("change", function () {
    myVideo.playbackRate = this.value;
  });

  //全屏
  function goFullScreen() {
    element = document.getElementById("myVideo");
    if (element.requestFullscreen) {
      //w3c
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      //moz Firefox
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      //IE
      element.msRequestFullscreen();
    } else if (element.oRequestFullscreen) {
      //Opera
      element.oRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      //webkit内核 Chrome Safari
      element.webkitRequestFullScreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var cssText = "width:100%;height:100%;overflow:hidden;";
      docHtml.style.cssText = cssText;
      docBody.style.cssText = cssText;
      element.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
      document.IsFullScreen = true;
    }
  }
  //退出全屏
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.oCancelFullScreen) {
      document.oCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById("videobox");
      docHtml.style.cssText = "";
      docBody.style.cssText = "";
      videobox.style.cssText = "";
      document.IsFullScreen = false;
    }
  }
  //判断是否全屏
  function isFullScreen() {
    return (
      document.fullscreen ||
      document.msFullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullScreen ||
      document.oFullScreen ||
      document.webkitIsFullScreen
    );
  }

  //全屏和退出全屏
  $(".expend").on("click", function () {
    //切换样式
    $(".expend").toggleClass("fa-expand fa-compress");
    if (isFullScreen()) {
      exitFullscreen();
    } else {
      goFullScreen();
    }
  });

  //拖动进度时
  $(".bar").on("click", function (e) {
    var time = myVideo.duration * (e.offsetX / $(".bar").width());
    myVideo.currentTime = time;
  });

  //更新播放进度
  myVideo.addEventListener("timeupdate", function () {
    //更新进度条
    var pValue = (myVideo.currentTime / myVideo.duration) * 100;
    $(".line").css("width", pValue + "%");
    //显示当前播放进度的时间
    document.querySelector(".current").innerText = getTimeBySecond(
      myVideo.currentTime
    );
  });

  //播放结束时
  myVideo.addEventListener("ended", function () {
    //播放按钮类样式进行还原
    $(".switch").removeClass("fa-pause").addClass("fa-play");
    $(".line").css("width", 0);
    //设置当前播放时间
    myVideo.currentTime = 0;
    //视频播放状态为设置为停止
    myVideo.pause();
  });

  //当视频元数据加载时运行
  myVideo.addEventListener("loadedmetadata", function () {
    //设置总时长
    document.querySelector(".totalTime").innerText = getTimeBySecond(
      myVideo.duration
    );
  });

  //讲当前秒数转换为时间
  function getTimeBySecond(second) {
    var hour = parseInt(second / (60 * 60));
    var minute = parseInt((second / 60) % 60);
    var second = parseInt(second % 60);
    return (
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minute < 10 ? "0" + minute : minute) +
      ":" +
      (second < 10 ? "0" + second : second)
    );
  }
});

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

videoPlay.css

body {
  background-color: #000;
  position: relative;
  max-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.videoBack {
  position: fixed;
  top: 40%;
  transform: translateY(-40%);
  cursor: pointer;
  z-index: 999;
}
.videoBack .back {
  position: absolute;
  top: 0;
  left: -80px;
  display: flex;
  align-items: center;
  width: 120px;
  height: 80px;
  background-color: #1d1d1d;
  color: #cdcdcd;
  transition: all 0.3s;
}
.videoBack .back .clickback {
  display: flex;
  flex-direction: column;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
}
.videoBack .back .clickback svg {
  width: 30px;
  height: 30px;
}
.videoBack .back .tit {
  position: absolute;
  top: 0;
  left: 80px;
  z-index: 1;
  width: 40px;
  height: 80px;
  background-color: #1d1d1d;
  line-height: 80px;
  text-align: center;
}
.videoBack .back .tit svg {
  width: 20px;
  height: 20px;
}
.videoBack .back:hover {
  color: #fff;
  left: 0px;
}
a {
  text-decoration: none;
}
.player {
  height: 100vh;
  margin: 0 auto;
  background-color: #000;
  position: relative;
}
video {
  display: block;
  height: 100%;
  margin: 0 auto;
}
.controls {
  width: 100%;
  height: 40px;
  background-color: #1c192c;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 100;
  border-radius: 4px;
}
.controls .switch {
  float: left;
  width: 20px;
  height: 20px;
  color: #fff;
  position: absolute;
  top: 11px;
  left: 11px;
}
.controls .expend {
  float: right;
  width: 20px;
  height: 20px;
  color: #fff;
  position: absolute;
  top: 11px;
  right: 11px;
}
.progress {
  width: 1100px;
  height: 10px;
  border-radius: 3px;
  background-color: #999;
  position: absolute;
  top: 15px;
  left: 234px;
}
.progress .line {
  width: 0;
  height: 100%;
  background-color: #f7f5f5;
  left: 0;
  top: 0;
  position: absolute;
}
.progress .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.times {
  position: absolute;
  top: 11px;
  left: 55px;
  color: #fff;
  font-size: 14px;
}
#select {
  float: right;
  height: 20px;
  background: #1c192c;
  color: #fff;
  position: absolute;
  top: 11px;
  right: 55px;
  border: none;
}

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

到这就能实现开头图示的效果，如果需要添加控制音量和开关音量，看下面，需要自己再加到播放控件中

	<button onclick="closeVoice()">静音/取消静音</button>
	<input type="range" id="volume" min="0" max="100" value="20" onchange="changeVolume(this)">
1
2

	//设置静音和取消静音
		function closeVoice(){
			myVideo.muted = !myVideo.muted;
		}
 
		//改变声音大小
		function changeVolume(obj){
			myVideo.volume = obj.value/100;
			console.log(myVideo.volume);
		}
1
2
3
4
5
6
7
8
9
10

完结撒花❀❀，觉得 有用的小伙伴感谢一键三连

参考文章：https://www.cnblogs.com/rogerwu/p/10072119.html

更多推荐：wantLG的《uni-app使用阿里iconfont多色图标》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。