文档章节

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

Kong777
 Kong777
发布于 2017/08/31 16:32
字数 1042
阅读 40
收藏 0
点赞 0
评论 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

那是我在夕阳下的奔跑:边跑边学习html5之audio与video

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

秋枫惋红 ⋅ 2017/08/30 ⋅ 0

最佳视频播放器:Adobe Flash Media Playback

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

晨曦之光 ⋅ 2012/03/15 ⋅ 0

开源的视频播放器

很多设计师在都会在他们的网站使用视频播放器。在线视频播放器无需为简单的用户和Web开发人员提供过多的介绍,它简单易用,为您建站时提供了灵活性和创造性,您可以添加无限数量的视频,并根...

大猪 ⋅ 2011/02/14 ⋅ 2

jQuery和CSS 3定制HTML 5视频播放器

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

it168网站 ⋅ 2012/04/27 ⋅ 0

微信中的video属性设置

qq_16494241 ⋅ 2017/03/14 ⋅ 0

HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川 ⋅ 2013/01/14 ⋅ 1

为开发者们准备的 10 款超棒的 jQuery 视频插件

跟之前介绍的 2013 年 12 月最好的 35+个 jQuery 插件不同,这篇文章是给开发者们准备的关于视频播放方面的 10 款最好的 jQuery 视频插件。这 10款插件各有各的特色,能很方便的在网页上嵌入...

oschina ⋅ 2014/01/17 ⋅ 13

7款很棒的 HTML5 视频播放器

为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。在这篇文章中,我收集了7个很棒的HTML5视频播...

未来十年 ⋅ 2012/09/29 ⋅ 0

Pear/PearPlayer.js

PearPlayer.js 一个支持多协议、多源、混合P2P-CDN的流媒体播放器 English PearPlayer(梨享播放器)[Demo] 是完全用JavaScript写的开源HTML5流媒体播放框架,实现了融合HTTP(包含HTTPS、H...

Pear ⋅ 2017/07/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 2分钟前 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 8分钟前 ⋅ 0

Python 优化 回溯下降算法

使用sympy构造表达式,实现回溯下降算法 画出函数图像,先使用暴力搜索,找到最小值约为2.5左右 然后选定初始点,开始进行回溯搜索,下降方向为负梯度方向 完整代码 from matplotlib import...

阿豪boy ⋅ 13分钟前 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 14分钟前 ⋅ 0

用接口模拟可伸缩枚举(34)

1、枚举的可伸缩性最后证明都不是什么好点子 扩展类型的元素是基本类型实例,基本类型的实例却不是扩展类型的元素,很混乱 目前还没有很好的方法来枚举基本类型的所有元素,及其扩展 可伸缩性...

职业搬砖20年 ⋅ 18分钟前 ⋅ 0

Ubuntu18.04 IDEA快捷键无法使用

IDEA默认的回退到上一视图的快捷键是Ctrl + Alt + Left,在ubuntu中这个快捷键被占用了,在16.04中可以在界面中取消这个快捷键,但是18.04就看不到了,可以使用以下命令解决 gsettings set ...

Iceberg_XTY ⋅ 22分钟前 ⋅ 0

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 34分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 54分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 59分钟前 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部