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. gitlab安装笔记三_Centos7安装GitLab

    系统版本是CentOS-7-x86_64-Everything-1804.iso,很多软件默认都有了,不需要安装 https://about.gitlab.com/install/#centos-7 ...

  2. Laravel --- 要点笔记

    一.路由: // 常规用法 Route::get('/',function(){ return 'get'; }) // 匹配多个 Route::match(['get','post'],'/',fu ...

  3. Unity 通用透明物体漫反射Shader（双面渲染&多光源&光照衰减&法线贴图&凹凸透明度控制）

    Shader "MyUnlit/AlphaBlendDiffuse" { Properties { _Color("Color Tint(贴图染色)",Colo ...

  4. Redi缓存注意事项

    缓存使用的场景 在一个高频访问的应用系统中,每次用户的请求需要去存储中获取数据,会对数据库造成很大的压力.容易导致数据库的奔溃.所以才会出现缓存来分担一部分的数据库的压力. 具体会产生数据库访问压力的 ...

  5. 关于vue中使用rem问题

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  6. redhat6.0下配置DNS

    最近操作系统要结课,老师要求在redhat上配置各种服务器角色,包括dhcp.ftp.web.dns.前三个都还好,但就dns,被折磨的死去活来的,真让人头大.还好在同学的帮助下最后配置成功,实现了正 ...

  7. asp.net core系列 67 Web压力测试工具WCAT

    一.介绍 最近搭建了一套CQRS框架,需要在投入开发前,进行必要的压力测试.Web Capacity Analysis Tool  (Wcat)是一种轻量级HTTP负载生成工具,主要用于衡量受控环境中 ...

  8. Linux中修改远程地址

    首先跳转到本地用户root,如果不是的话可能没有权限 第一步:安装ssh服务 执行命令:yum install openssh-server (因为我已经安装过了,所以显示的是已安装) 第二步:修改S ...

  9. POI自动调整列宽支持中文

    /** * @Description:表格自适应宽度(中文支持) * @Author: * @param sheet sheet * @param columnLength 列数 */ private ...

  10. 计算机组成原理第五章（中央处理器CPU）

    ---恢复内容开始--- 指令周期(取指令.分析指令到执行完该指令所需的全部时间) 机器周期通常又称CPU周期 通常把一条指令周期分成若干个机器周期,每个机器周期完成一个基本操作 以主存的工作周期(存 ...