关于自定义播放器需要了解的知识的案例（video标签）

近来工作上需要开发自定义播放器，了解了不少关于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代码开始：

1. 创建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")

2. 暂停功能

           //暂停功能 
           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()
           })

    

3. 结束时自动切换为暂停标志

   
           v.addEventListener("ended",function(){
               $(".stop>i").removeClass("icon-zanting")
               $(".stop>i").addClass("icon-bofang")
           })

    

4. 追踪时间改变使用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")
           })

    

5. 当鼠标拖动range标签时，获取value改变视频位置

           ran.addEventListener("input",function(){
               var value = v.duration * ran.value/100;
               v.currentTime = value;
               setRangeCss(this,"#DADADA")
           })

    

6. 声音的range标签

           sound.addEventListener("input",function(){
               console.log(sound.value)
               v.volume = (sound.value/100)
               setRangeCss(this,"#DADADA")
           })

    

7. 静音功能，同时要对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")
               }
           })

    

8. 页面全屏功能 这里我是用css控制的 修复定位 宽高都为100% 使用JS调用真正的全屏方法可以访问这里：点我查看

           fullb.addEventListener("click",function (){
               $(vbox).toggleClass("fullpage")
           })

    

9. 计算时间函数，如果不满两位数自动补成两位数

           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
           }

10. 设置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% )' )
            }

11. 最后初始化播放器

            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()
        }

     

转载于:https://my.oschina.net/u/3281152/blog/1527032