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. __file__、__name__、__dict__方法整理

    本文主要介绍__file__.__name__.__dict__三个方法的作用. #01 __file__:打印当前文件的位置. # import os # print(__file__) # 在py ...

  2. SpringBoot项目多数据源配置

    博主总结的不错,事务也考虑到了,存一下: https://blog.csdn.net/xqnode/article/details/86498507

  3. 【数据结构--二叉树】Java递归实现二叉树遍历

    参考链接:https://www.cnblogs.com/yaobolove/p/6213936.html 这有一棵树: 1.节点对象 package com.tree.mybinarytree; / ...

  4. jQuery-ajax-.load方法

    使用jQuery封装的ajax是非常好用的,这个里面提供了几个比较好用的方法. load(url[,data, callback])方法: 说明:这个是jQuery中的最底层方法$.ajax()封装的 ...

  5. Android中控件属性详细总结（转载）

    转载地址:https://www.cnblogs.com/nanguojs/p/5950510.html 1.LinearLayout(线性布局): 可以分为水平线性:android:orientat ...

  6. 深入V8引擎-AST(4)

    (再声明一下,为了简单暴力的讲解AST的转换过程,这里的编译内容以"'Hello' + ' World'"作为案例) 上一篇基本上花了一整篇讲完了scanner的Init方法,接下 ...

  7. 如何成长为一名合格的web架构师？

    写代码要经历下面几个阶段.  一 .你必须学习面向对象的基础知识,如果连这个都忘了,那你的编程之路注定是在做原始初级的重复! 很多程序员都知道类.方法.抽象类.接口等概念,但是为什么要面向对象,好处在 ...

  8. K Balanced Teams CodeForces - 1133E (Dp)

    题意: 给出 n 个数,选取其中若干个数分别组成至多 k 组,要求每组内最大值与最小值的差值不超过5,求最后被选上的总人数. 题解: 将a[1∼n] 从小到大排序, f[i][j] 表示到第 i 个数 ...

  9. Go - 循环

    目录 概述 循环 array 循环 slice 循环 map break continue goto switch 推荐阅读 概述 前几篇文章分享了 array 数组.slice 切片.map 集合, ...

  10. easyui combobox name选择器

    HTML: <input name="myinputdom" id="myinputdom" class="easyui-combobox my ...