文档章节

关于自定义播放器需要了解的知识的案例(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
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
最佳视频播放器:Adobe Flash Media Playback

与世界分享视频的最快和最简便的方法是将其放置于因特网。 为了使得大家能够观看视频,视频播放器是必不可少的。 为了让每个人都能享受这一便利,Adobe已经发布了一款免费视频播放器,其名称...

晨曦之光
2012/03/15
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

没有更多内容

加载失败,请刷新页面

加载更多

利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

linuxprobe16
今天
5
0
OSChina 周日乱弹 —— 恨不得给你买张飞机挂票

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席灵魂师:分享张希/曹方的单曲《认真地老去》 来不及认真的年轻过,就认真的老去! 《认真地老去》- 张希/曹方 手机党少年们想听...

小小编辑
今天
281
6
如何实现靠谱的分布式锁?

分布式锁,是用来控制分布式系统中互斥访问共享资源的一种手段,从而避免并行导致的结果不可控。基本的实现原理和单进程锁是一致的,通过一个共享标识来确定唯一性,对共享标识进行修改时能够...

郑加威
今天
3
0
Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
5
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部