近来工作上需要开发自定义播放器,了解了不少关于video对象的知识,下面拿出来分享。
首先 video 标签的参考手册地址:点这里访问
首先需要用到的是h5中的一个标签:
range是一个拖动条,其中value代表他当前的数值。
<input type="range" value="0">
关于range的参考手册地址:点这里访问
自定义播放器会使用到range标签 例如音量条,例如进度条等等
案例只是实现最基本的功能
案例开始:
首先html结构代码:
<div class="splay">
<video src='+ src +' autoplay="autoplay"></video>
<div class="control"><input class="range" type="range" value="0">
<div class="ntime"><p>0:00<span> / 0:00</span></p></div>
<button class="stop"><i class="iconfont icon-zanting"></i></button>
<button class="fullb"><i class="iconfont icon-quanping"></i></button>
<div class="soundbox"><i class="soundi iconfont icon-yinliang"></i><input class="sound" type="range" value="30">
</div>
</div>
</div>
JS代码开始:
- 创建dom元素并获取到对象
var vbox = document.querySelector(selected) $(vbox).html(' <div class="splay"> <video src='+ src +' autoplay="autoplay" ></video> <div class="control"> <input class="range" type="range" value="0"> <div class="ntime"><p>0:00<span> / 0:00</span></p></div> <button class="stop"><i class="iconfont icon-zanting"></i></button> <button class="fullb"><i class="iconfont icon-quanping"></i></button> <div class="soundbox"> <i class="soundi iconfont icon-yinliang"></i><input class="sound" type="range" value="30"> </div> </div> </div>') var v = vbox.querySelector("video") var sbtn = vbox.querySelector(".stop") var sound = vbox.querySelector(".sound") var soundi = vbox.querySelector(".soundi") var fullb = vbox.querySelector(".fullb") var ran = vbox.querySelector(".range")
- 暂停功能
//暂停功能 sbtn.addEventListener("click",function(){ if(v.paused){ v.play() $(".stop>i").removeClass("icon-bofang") $(".stop>i").addClass("icon-zanting") }else{ v.pause() $(".stop>i").removeClass("icon-zanting") $(".stop>i").addClass("icon-bofang") } }) //点击video标签也会触发暂停 v.addEventListener("click",function(){ sbtn.click() })
- 结束时自动切换为暂停标志
v.addEventListener("ended",function(){ $(".stop>i").removeClass("icon-zanting") $(".stop>i").addClass("icon-bofang") })
- 追踪时间改变使用timeupdate事件
v.addEventListener("timeupdate",function(){ ran.value = v.currentTime/v.duration * 100 $(".ntime>p").html(toEtime(v.currentTime) +'<span> / '+ toEtime(v.duration)+'</span>') setRangeCss(ran,"#DADADA") })
- 当鼠标拖动range标签时,获取value改变视频位置
ran.addEventListener("input",function(){ var value = v.duration * ran.value/100; v.currentTime = value; setRangeCss(this,"#DADADA") })
- 声音的range标签
sound.addEventListener("input",function(){ console.log(sound.value) v.volume = (sound.value/100) setRangeCss(this,"#DADADA") })
- 静音功能,同时要对range处理
soundi.addEventListener("click",function(){ if(v.muted){ $(this).removeClass("icon-jingyin") $(this).addClass("icon-yinliang") v.muted = false setRangeCss(sound,"#DADADA") }else{ $(this).removeClass("icon-yinliang") $(this).addClass("icon-jingyin") v.muted = true setRangeCss(sound,"#DADADA","#DADADA") } })
-
页面全屏功能 这里我是用css控制的 修复定位 宽高都为100% 使用JS调用真正的全屏方法可以访问这里:点我查看
fullb.addEventListener("click",function (){ $(vbox).toggleClass("fullpage") })
-
计算时间函数,如果不满两位数自动补成两位数
function toEtime(time){ var str = "" if(time == undefined){ str = "0:00" }else if(time/60 > 0){ var s = parseInt(time%60) var m = parseInt(time/60) s = s >= 10 ? s : "0"+ s str = m + ":" + s }else{ str = time } return str }
-
设置range css函数
function setRangeCss(ele,color1,color2){ color1 = color1 || "white" color2 = color2 || "#29a9df" $(ele).css('background', 'linear-gradient(to right, '+color2+' 0%, '+color2+' '+ele.value+'%'+', '+color1+' '+ele.value+'%,'+color1+' 100% )' ) }
-
最后初始化播放器
function initPlayer(){ if(v.src == window.location){ $(".ntime").html("暂无视频") } setRangeCss(ran,"#DADADA") setRangeCss(sound,"#DADADA") } initPlayer()
完整JS代码:
function splay(selected,src){ var vbox = document.querySelector(selected) $(vbox).html(' <div class="splay"> <video src='+ src +' autoplay="autoplay" ></video> <div class="control"> <input class="range" type="range" value="0"> <div class="ntime"><p>0:00<span> / 0:00</span></p></div> <button class="stop"><i class="iconfont icon-zanting"></i></button> <button class="fullb"><i class="iconfont icon-quanping"></i></button> <div class="soundbox"> <i class="soundi iconfont icon-yinliang"></i><input class="sound" type="range" value="30"> </div> </div> </div>') var v = vbox.querySelector("video") var sbtn = vbox.querySelector(".stop") var sound = vbox.querySelector(".sound") var soundi = vbox.querySelector(".soundi") var fullb = vbox.querySelector(".fullb") var ran = vbox.querySelector(".range") var ctimer = null sbtn.addEventListener("click",function(){ if(v.paused){ v.play() $(".stop>i").removeClass("icon-bofang") $(".stop>i").addClass("icon-zanting") }else{ v.pause() $(".stop>i").removeClass("icon-zanting") $(".stop>i").addClass("icon-bofang") } }) v.addEventListener("click",function(){ sbtn.click() }) v.addEventListener("dblclick",function(){ console.log("被双击了") fullb.click() }) v.addEventListener("waiting",function(){ console.log("加载中....") }) v.addEventListener("ended",function(){ $(".stop>i").removeClass("icon-zanting") $(".stop>i").addClass("icon-bofang") }) v.addEventListener("timeupdate",function(){ ran.value = v.currentTime/v.duration * 100 $(".ntime>p").html(toEtime(v.currentTime) +'<span> / '+ toEtime(v.duration)+'</span>') setRangeCss(ran,"#DADADA") }) v.addEventListener("progress",function(){ }) ran.addEventListener("input",function(){ var value = v.duration * ran.value/100; v.currentTime = value; setRangeCss(this,"#DADADA") }) sound.addEventListener("input",function(){ console.log(sound.value) v.volume = (sound.value/100) setRangeCss(this,"#DADADA") }) soundi.addEventListener("click",function(){ if(v.muted){ $(this).removeClass("icon-jingyin") $(this).addClass("icon-yinliang") v.muted = false setRangeCss(sound,"#DADADA") }else{ $(this).removeClass("icon-yinliang") $(this).addClass("icon-jingyin") v.muted = true setRangeCss(sound,"#DADADA","#DADADA") } }) fullb.addEventListener("click",function (){ $(vbox).toggleClass("fullpage") }) function toEtime(time){ var str = "" if(time == undefined){ str = "0:00" }else if(time/60 > 0){ var s = parseInt(time%60) var m = parseInt(time/60) s = s >= 10 ? s : "0"+ s str = m + ":" + s }else{ str = time } return str } function setRangeCss(ele,color1,color2){ color1 = color1 || "white" color2 = color2 || "#29a9df" $(ele).css('background', 'linear-gradient(to right, '+color2+' 0%, '+color2+' '+ele.value+'%'+', '+color1+' '+ele.value+'%,'+color1+' 100% )' ) } function initPlayer(){ if(v.src == window.location){ $(".ntime").html("暂无视频") } setRangeCss(ran,"#DADADA") setRangeCss(sound,"#DADADA") } initPlayer() }