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. spring 5.x 系列第10篇 —— 整合mongodb (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 配置文件位于com.heibaiying. ...

  2. 【Netty4】深入学习Netty

    Netty is an asynchronous event-driven network application framework  for rapid development of mainta ...

  3. BootStrap4.0Demo+轮播素材记录

    整理一些关于前端的东西: BootStrap4.0Demo: 官方DEMO:http://code.z01.com/v4/components/carousel.html 下午翻了点不错的轮播素材: ...

  4. SSM(二)MyBatis多表联查

    这篇文章写了以下几个简单的例子,用来说明MyBatis多标联查基本语法 1.sql片段的用法 2.一对多查询 3.多条sql的一对多查询 4.多对一查询 5.多条sql一对多查询 6.多对多查询 这里 ...

  5. 四种途径提升RabbitMQ传输数据的可靠性

    前言 RabbitMQ虽然有对队列及消息等的一些持久化设置,但其实光光只是这一个是不能够保障数据的可靠性的,下面我们提出这样的质疑: (1)RabbitMQ生产者是不知道自己发布的消息是否已经正确达到 ...

  6. ASP.NET Core on K8S学习初探（2）K8S基本概念快速一览

    在上一篇<单节点环境搭建>中,通过Docker for Windows在Windows开发机中搭建了一个单节点的K8S环境,接下来就是动人心弦的部署ASP.NET Core API到K8S ...

  7. tar命令中的 -C 作用

    我用这个命令:tar zcvf chao.tar.gz /chao/*  打包文件的时候,在压缩包里把  /chao/这个路径也打包进去了. [root@yunwei-test chao]# ls / ...

  8. Linux嵌入式GDB调试环境搭建

    ======================= 我的环境 ==========================PC 端: CPU:x86_64, 系统:Ubuntu,IP:172.16.2.212开发 ...

  9. kubeadm安装k8s

    软件版本: kubelet:V1.13.3 docker: 18.06.1 实验环境: Centos 7.5.1804 说明: 初学.安装步骤参考了阿良的文档,并做了部分修改. 步骤如下: 1.关闭防 ...

  10. 阿里系手淘weex学习第一天

    官网原文:https://weex.apache.org/zh/tools/extension.html#功能 功能 创建Weex项目. 支持在VSCode对Weex的语法支持. 检查iOS和Andr ...