项目 - 音视频播放
项目中获取视频的时长以及显示实时的播放时长
视频标签相关的API
知识点：
① oncanplay：当浏览器可以开始播放视频或者音频的时候所触发的事件。
语法结构：
视频.oncanplay = function(){
}
② 视频的播放以及暂停功能
播放：视频.play()
暂停：视频.pause()
③ ontimeupdate：在视频播放时间改变的时候触发的事件
语法结构：
视频.ontimeupdate = function(){
}
④ currentTime：设置或返回音频 / 视频中的当前播放位置（以秒计）。
⑤ duration:返回当前音频 / 视频的长度（以秒计）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 播放视频 */
.play_left{
width: 850px;
height: 485px;
position: relative;
}
/* 右边 */
.play_right{
width: 340px;
height: 485px;
}
.play_item{
width: 100%;
height: 47px;
background: #3f3f3f;
}
.play_item li{
width: 113px;
height: 45px;
background: #323232;
color: #ccc;
text-align: center;
font:14px/45px "宋体";
cursor: pointer;
}
.play_list li{
height: 24px;
line-height: 24px;
color: #999;
padding: 17px 15px 10px 20px;
border-bottom: 1px solid #373737;
}
.play_list li:hover{
background: #000;
}
.play_list .active{
background: #000;
color: #ff740f;
}
/* 视频的控制选项 */
.play_contorls{
width: 100%;
height: 74px;
background: url(img/offcn_icnp07.png) no-repeat center;
position: absolute;
bottom: 0px;
left: 0px;
}
.play_btn{
width: 143px;
height: 74px;
}
.play_btn a{
display: block;
width: 21px;
height: 26px;
background: url(img/offcn_icnolh04.png) no-repeat center;
position: absolute;
left:30px;
top:25px
}
.play_btn .play_b{
background: url(img/offcn_icnolh03.png) no-repeat center;
}
.play_cur{
width: 64px;
font: 16px/18px "微软雅黑";
color: #fff;
position: absolute;
left: 64px;
top:30px;
}
.slide{
width: 550px;
height: 74px;
position: absolute;
}
.slide_bg{
position: absolute;
width: 100%;
height: 4px;
background: #be998f;
top:35px;
}
.slide_l{
width: 0px;
height: 4px;
background: blue;
position: absolute;
top:35px;
}
.slide_btn{
position: absolute;
width: 22px;
height: 22px;
background: url(img/offcn_icnolh05.png) no-repeat center;
top: 26px;
}
.play_time{
width: 64px;
font: 16px/18px "微软雅黑";
color: #fff;
position: absolute;
left: 720px;
top:30px;
}
</style>
</head>
<body>
<div class="play_left fl">
<video id='video' width="100%" height="100%" src="./media/1、动画.50.mp4"></video>
<div class="play_contorls">
<p class="fl play_btn">
<a href="javascript:;" id="play_btns" class=""></a>
</p>
<p class="fl play_cur" id="playCur">00:00:00</p>
<div class="fl slide">
<p class="slide_bg"></p>
<p class="slide_l" id="slide"></p>
<a href="javascript:;" class="slide_btn" id="slideBtn"></a>
</div>
<div class="fl play_time" id="playTime">00:00:00</div>
</div>
</div>
</div>
<script>
var play_btns = document.getElementById("play_btns");
var video = document.getElementById("video");
var playTime = document.getElementById("playTime");
var playCur = document.getElementById("playCur");
var slide = document.getElementById("slide");
var slideBtn = document.getElementById("slideBtn");
//显示视频的总时长
//oncanplay：当浏览器可以开始播放视频或者音频的时候所触发的事件
video.oncanplay = function(){
//duration:返回当前音频 / 视频的长度（以秒计）
playTime.innerHTML = Time(this.duration); //单位为毫秒
}
function Time(date){
//调用PadTime函数添加一个添加前导0的函数
var hours = PadTime(parseInt(date/3600));
var mis = PadTime(parseInt(date%3600/60));
var sec = PadTime(parseInt(date%60));
var str = hours+':'+mis+':'+sec;
return str;
}
function PadTime(value){
//value是形式参数
//value参数对应的就是parseInt(date/3600)|parseInt(date%3600/60) | parseInt(date%60)
return value<10?'0'+value:value;
}
//切换视频的播放以及暂停的状态
var tag = true;
play_btns.onclick = function(){
if(tag){
//如果tag状态为true，则播放视频
//video.play() 播放视频
video.play();
//切换图片的样式为暂停的图片
play_btns.className = "play_b";
//修改tag的状态激发else中的内容
tag = false;
}
else{
//如果tag状态为false，则暂停视频
//video.pause() 暂停视频
video.pause();
//清除样式
play_btns.className = "";
//修改样式true，激发为播放时候的状态
tag =true;
}
}
//在视频播放的时候触发的事件
video.ontimeupdate = function(){
//视频在实时播放的时候需要获取当前的时间
//currentTime：设置或返回音频 / 视频中的当前播放位置（以秒计）。
playCur.innerText = Time(video.currentTime);
//播放进度条以及进度宽度 = 当前播放位置*播放条的总宽度 / 视频的总长度
slide.style.width = video.currentTime*550 / video.duration + "px";
slideBtn.style.left = video.currentTime*550 / video.duration + "px";
}
</script>
</body>
</html>