1.自定义效果截图

2.效果源码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>H5 video自定义视频控件</title>

        <style>

            * {

                   margin: 0;

                   padding: 0;

            }

            .box {

                background-color: #000;

                position:relative;

                display: inline-block;

                color: #fff;

                left: 50%;

                margin-left: -300px;

            }

            .controls {

                position: absolute;

                bottom: 3px;

            }

            input[type="button"]{

                background-color: cornflowerblue;

                color: #fff;

                border: none;

                padding: 5px 10px;

                cursor: pointer;

            }

            #rangebar {

                width: 200px;

                height: 5px;

                border: 1px solid #ccc;

                margin-top: 3px;

                display: inline-block;

            }

            #rangebar>p {

                width: 0%;

                height: 100%;

                background-color: blueviolet;

            }

            #progress {

                vertical-align: middle;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <video src="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" width="600" height="450" poster="">

                您的浏览器不支持 video 标签。

            </video>

            <div class="controls">

                <input type="button" value="播放" id="play"/>

                <input type="button" value="暂停" id="pause"/>

                <input type="button" value="快进" id="speed"/>

                <input type="button" value="快退" id="back"/>

                <input type="button" value="静音" id="mute"/>

                <input type="button" value="全屏" id="fullscreen"/>

                <a href="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" download="广告视频">

                    <input type="button" value="下载" id="download"/>

                </a>

                VOICE:<input type="range" id="progress" value="30" min="0" max="100"/>

                <br/></br.>视频进度：<div id="rangebar">

                    <p></p>

                </div>

            </div>

        </div>

        <script>

            var video = document.getElementsByTagName("video")[0];

            play.onclick=function(){

                video.play()

            }

            pause.onclick=function(){

                video.pause()

            }

            speed.onclick=function(){

                video.currentTime += 5;

                console.log(video.currentTime);

            }

            back.onclick=function(){

                video.currentTime -=5;

                console.log(video.currentTime);

            }

            mute.onclick = function(){

                video.muted = true;

                progress.value=0;

            }

            fullscreen.onclick=function(){

                video.webkitRequestFullscreen();

            }

            /* *视频播放进度*

             * 获取视频总时长 video.duration

             * ........当前播放位置 video.currentTime

             * 进度条p的宽度：(video.currentTime/video.duration)*100+'%'

             * */

            var timer = setInterval(function(){

                rangebar.getElementsByTagName("p")[0].style.width=(video.currentTime/video.duration)*100+'%';

            },100);

            //音频大小

            progress.onmousemove = function(){

                video.volume = this.value/100;

            }

        </script>

    </body>

</html>

H5 video自定义视频控件的更多相关文章

  1. android--------自定义视频控件（视频全屏竖屏自动切换）

    android播放视频也是常用的技术,今天分享一个自定义视频控件,支持自定义控制 UI,全屏播放, 可以实现自动横竖屏切换的控件,跟随手机的位置而,重力感应自动切换横竖屏. 效果图:   代码下载Gi ...

  2. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  3. 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK

    LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...

  4. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  5. (八)ASP.NET自定义用户控件（1）

    http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控 ...

  6. 自定义组合控件，适配器原理-Day31

    自定义组合控件,适配器原理-Day31 mobile2.1 主页定义 手机上锁功能 1.弹出设置密码框. 手机下载进度 自定定义控件 控件的属性其实就是控件类一个属性设置属性调用类的set方法方法, ...

  7. android之视频播放系统VideoView和自定义VideoView控件的应用

    Android播放视频,包含系统自带VideoView控件,和自定义VideoView控件,可全屏播放,案例包含了本地视频和网络视频. 1:自定义VideoView控件 2:布局代码 3:Activi ...

  8. 【Android开发日记】之入门篇（十四）——Button控件+自定义Button控件

        好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...

  9. 安卓自定义组合控件--toolbar

    最近在学习安卓APP的开发,用到了toolbar这个控件, 最开始使用时include layout这种方法,不过感觉封装性不好,就又改成了自定义组合控件的方式. 使用的工具为android stud ...

随机推荐

  1. ZooKeeper 系列（二）—— Zookeeper单机环境和集群环境搭建

    一.单机环境搭建         1.1 下载         1.2 解压         1.3 配置环境变量         1.4 修改配置         1.5 启动         1. ...

  2. sqlserver 表值函数与标量值函数

    除了在我们常用的程序开发中要用到函数外,在sql语句中也常用到函数,不论哪种,思想都没有变,都是为了封装,可复用. 创建的方法和整体结构都大体相同,都少不了函数名,函数的形参,返回值等这些. 一.表值 ...

  3. 系统学习 Java IO ---- 目录，概览

    Java IO 类的系统教程,原创.主要参考自英文教程 Java IO Tutorial 和 Java Doc. http://tutorials.jenkov.com/java-io/index.h ...

  4. Net Core 2.1 日志记录框架NLog+Mysql配置

    NLog是什么? 这里还是简单介绍一下吧,为了让小白也知道.NLog是一个灵活的免费日志记录平台,适用于各种.NET平台,包括.NET Core.NLog可以通过简单地配置就可以可以很方便的写入多个日 ...

  5. Filebeat 7.1.1 安装及使用(连接ES)

    1. 下载 & 解压 # 下载 wget https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-7.1.1-linux- ...

  6. Jenkins+GitLab+Docker+SpringCloud+Kubernetes实现可持续自动化微服务

    现有混合云平台的场景下,即有线下和线上的环境,又有测试与正式的场景,而且结合了Docker,导致打包内容有所区分,且服务的发布流程复杂起来,手工打包需要在编译阶段就要根据环境到处更改配置,因此纯手工发 ...

  7. Ural 2072：Kirill the Gardener 3（DP）

    http://acm.timus.ru/problem.aspx?space=1&num=2072 题意:有n朵花,每朵花有一个饥渴值.现在浇花,优先浇饥渴值小的(即从小到大浇),浇花需要耗费 ...

  8. 微信小程序源码

    内带scroll滚动轮播:如图:       微信小程序开发工具:微信开发工具: 文件目录: images:小程序的图标 pages:小程序页面 utils:方法js git地址:https://gi ...

  9. scrapy基础知识之防止爬虫被反的几个策略：：

    动态设置User-Agent(随机切换User-Agent,模拟不同用户的浏览器信息) 禁用Cookies(也就是不启用cookies middleware,不向Server发送cookies,有些网 ...

  10. [AI开发]目标跟踪之计数

    基于视频结构化的应用中,目标在经过跟踪算法后,会得到一个唯一标识和它对应的运动轨迹,利用这两个数据我们可以做一些后续工作:测速(交通类应用场景).计数(交通类应用场景.安防类应用场景)以及行为检测(交 ...