<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>视频</title>
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

#container {
width: 800px;
height: auto;
position: relative;
}

.control {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
}

.progress {
width: 500px;
margin-bottom: 0px;
}
</style>
</head>
<body>

<div id="container">
<video id="mv" src="./resource/mp4/不能说的秘密.mp4" width="800"
preload
></video>
<div class="control">
<button class="btn btn-primary"><span id="playPauseBtn" class="glyphicon glyphicon-play "
aria-hidden="true"></span></button>

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 0;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="time-info">
<span id="currentTime">0:00</span> / <span id="totalTime">3:46</span>
</div>
</div>
</div>

<script>
var btns = document.querySelectorAll('button');
var video = document.querySelector('#mv');
var playPauseBtn = document.querySelector('#playPauseBtn');
var currentTime = document.querySelector('#currentTime');
var totalTime = document.querySelector('#totalTime');
var progressBar = document.querySelector('.progress-bar');
var progress = document.querySelector('.progress');

//点击开始
btns[0].onclick = function () {
playPauseControl();
}

//当视频播放的时候触发
video.onplay = function () {
playPauseBtn.classList.add('glyphicon-pause');
}

video.onpause = function () {
playPauseBtn.classList.remove('glyphicon-pause');
}

video.onclick = function () {
playPauseControl();
}

//当元数据加载完毕之后触发 455 -> 5:55
video.onloadedmetadata = function () {
//显示总的时间
totalTime.innerHTML = formatTime(video.duration);
}

//播放时间发生改变的时候触发
video.ontimeupdate = function () {
currentTime.innerHTML = formatTime(video.currentTime);
//修改元素的宽度
var scale = video.currentTime / video.duration;// 0.3 => 30%
progressBar.style.width = scale * 100 + '%';
}

//点击切换播放位置
progress.onclick = function (e) {
//获取当前点击位置的偏移量
var x = e.offsetX;
//获取进度条元素的宽度
var w = progress.offsetWidth;
video.currentTime = x / w * video.duration;
}

//格式化时间字符串
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var s = Math.floor(seconds % 60);
if (s < 10) {
s = '0' + s;
}
return minutes + ':' + s;
}


//播放暂停控制
function playPauseControl() {
//检测视频是否处于 暂停状态
if (video.paused) {
video.play();// 加上
} else {
video.pause();// 移除
}
}


</script>

</body>
</html>