文档章节

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

Kong777
 Kong777
发布于 2017/08/31 16:32
字数 1042
阅读 42
收藏 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:听说给政府人员使用的,不允许浏览器下载插件...

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

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

subying
2014/12/01
26.4K
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

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部