文档章节

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

Kong777
 Kong777
发布于 2017/08/31 16:32
字数 1042
阅读 40
收藏 0

近来工作上需要开发自定义播放器,了解了不少关于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()
        }

     

© 著作权归作者所有

共有 人打赏支持
Kong777
粉丝 0
博文 18
码字总数 10953
作品 0
私信 提问
PC浏览器播放HLS协议的视频

以下是自己对 PC浏览器播放HLS协议视频 的解决方法的一个搜集总结。 背景 项目要求PC端浏览器播放HLS直播视频,并且不能使用Flash插件播放器[PS:听说给政府人员使用的,不允许浏览器下载插件...

一如初衷
11/07
0
0
html5标签video(播放器)学习笔记(二)-基本操作

上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播...

subying
2014/12/01
0
0
那是我在夕阳下的奔跑:边跑边学习html5之audio与video

今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前言 Flash被退休与html5的上位 Flash这项技术诞...

秋枫惋红
2017/08/30
0
0
jQuery和CSS 3定制HTML 5视频播放器

【IT168 技术】目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的。现在,只需要有...

it168网站
2012/04/27
0
0
微信中的video属性设置

qq_16494241
2017/03/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
58分钟前
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
16
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部