代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无标题文档</title>

    <style>

        *{margin:; padding:;}

        #div1{width:300px; height:30px; background:#; overflow:hidden; position:relative;}

        #div2{width:60px; height:30px; background:red; position:absolute; left:; top:;}

        #div3{width:300px; height:10px; background:#; overflow:hidden; position:relative;top:10px;}

        #div4{width:60px; height:10px; background:yellow; position:absolute; left:240px;top:;}

    </style>

    <script>

        window.onload= function(){

            var oV = document.getElementById('v1');

            var aInput = document.getElementsByTagName('input');

            var oDiv1 = document.getElementById('div1');

            var oDiv2 = document.getElementById('div2');

            var oDiv3 = document.getElementById('div3');

            var oDiv4 = document.getElementById('div4');

            var disX = ;

            var disX2 = ;

            var timer = null;

            aInput[].onclick = function(){

                if( oV.paused ){//如果是暂停的

                    oV.play();

                    this.value = '暂停';

                    nowTime();

                    timer =setInterval(nowTime,);

                }

                else{

                    oV.pause();

                    this.value = '播放';

                    clearInterval(timer);

                }

            };

            aInput[].value = changeTime(oV.duration);

            aInput[].onclick = function(){

                if( oV.muted ){

                    oV.volume = ;

                    this.value = '静音';

                    oV.muted = false;

                }

                else{

                    oV.volume = ;

                    this.value = '取消静音';

                    oV.muted = true;

                }

            };

            aInput[].onclick = function(){

                oV.mozRequestFullScreen();

            };

            function nowTime(){

                aInput[].value =changeTime(oV.currentTime);

                //获取比例

                var scale =oV.currentTime/oV.duration;

                //设置位置

                oDiv2.style.left = scale *  +'px';

            }

            function changeTime(iNum){

                iNum = parseInt( iNum );

                var iH =toZero(Math.floor(iNum/));

                var iM =toZero(Math.floor(iNum%/));

                var iS = toZero(Math.floor(iNum%));

                return iH + ':' +iM + ':' + iS;

            }

            function toZero(num){

              if(num<=) {

                  return ''+num;

              }

                else{

                    return '' + num;

                }

            }

            oDiv2.onmousedown = function(ev){

                var ev = ev || window.event;

                disX = ev.clientX - oDiv2.offsetLeft;

                document.onmousemove = function(ev){

                    var ev = ev || window.event;

                    var L = ev.clientX - disX;

                    if(L<){

                        L = ;

                    }

                    else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){

                        L = oDiv1.offsetWidth- oDiv2.offsetWidth;

                    }

                    oDiv2.style.left = L + 'px';

                    //找出0到1的比例

                    var scale =L/(oDiv1.offsetWidth - oDiv2.offsetWidth);

                    //得到拖拽后当前的时间

                    oV.currentTime = scale *oV.duration;

                    //让当前时间更新

                    nowTime();

                };

                document.onmouseup = function(){

                    document.onmousemove = null;

                };

                return false;

            };

            oDiv4.onmousedown = function(ev){

                var ev = ev || window.event;

                disX2 = ev.clientX -oDiv4.offsetLeft;

                document.onmousemove = function(ev){

                    var ev = ev || window.event;

                    var L = ev.clientX - disX2;

                    if(L<){

                        L = ;

                    }

                    else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){

                        L =oDiv3.offsetWidth - oDiv4.offsetWidth;

                    }

                    oDiv4.style.left = L + 'px';

                    var scale =L/(oDiv3.offsetWidth - oDiv4.offsetWidth);

                    oV.volume = scale;

                };

                document.onmouseup = function(){

                    document.onmousemove = null;

                };

                return false;

            };

        };

    </script>

</head>

<body>

<video id="v1" >

<source src="陈奕迅 - 陪你度过漫长岁月.mp4"  ></source>

</video><br/>

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

<input type="button" value="00:00:00" />

<input type="button" value="00:00:00" />

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

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

<div id="div1">

<div id="div2">

</div>

</div>

<div id="div3">

<div id="div4"></div>

</div>

</body>

</html>

 2017-09-03   23:07:12 

html5 自制播放器的更多相关文章

  1. .NET中使用APlayer组件自制播放器

    目录 说明 APlayer介绍 APlayer具备功能 APlayer使用 自制播放器Demo 未完成工作 源码下载 说明 由于需求原因,需要在项目中(桌面程序)集成一个在线播放视频的功能.大概要具备 ...

  2. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  3. Plyr – 简单，灵活的 HTML5 媒体播放器

    Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示      ...

  4. APlayer组件自制播放器

    .NET中使用APlayer组件自制播放器 2015-02-02 09:46 by xiaozhi_5638, 402 阅读, 9 评论, 收藏, 编辑 目录 说明 APlayer介绍 APlayer ...

  5. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  6. 第十一篇、HTML5隐藏播放器播放背景音乐

    html5添加网页背景音乐  一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用. html5方法一:<audio autoplay=" ...

  7. 一款好看+极简到不行的HTML5音乐播放器-skPlayer

    Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...

  8. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  9. HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

随机推荐

  1. Xcode模拟器快捷键

    command + 左右 = 横竖屏旋转 command + H + H = 切入层级后台模式

  2. php stristr()函数 语法

    php stristr()函数 语法 作用:返回一个字符串在另一个字符串中开始位置到结束的字符串,不区分大小写.直线电机厂家怎么样? 语法:stristr(string,search,before_s ...

  3. CSU 1552 Friends（二分图 + 米勒测试）

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1552 Description On an alien planet, every e ...

  4. 设置请求头信息User-Agent

    设置请求头信息User-Agent来模拟浏览器. 先来看User-Agent: 当我们向服务器发送请求时,浏览器会将一些头信息附加上,然后发给服务器. 如上图所示头信息(请求头信息 Request H ...

  5. P2258子矩阵

    传送 一道看起来就很暴力的题. 这道题不仅暴力,还要用正确的姿势打开暴力. 因为子矩阵的参数有两个,一个行一个列(废话) 我们一次枚举两个参数很容易乱对不对?所以我们先枚举行,再枚举列 枚举完行,列, ...

  6. 常用的Android关键词定位方法

    1字符串,特征字 根据程序运行中出现的特征字词进行搜索,从而获取定位到程序的相关位置之中.以前用 得比较多,不过现在一般难以找到想要的关键词.有时候需要对特征字进行拆分来进行搜索.才 能获得一点提示. ...

  7. day39—JavaScript缓冲运动

    转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...

  8. day34—JavaScript实现DOM操作

    转行学开发,代码100天——2018-04-19 1.通过JavaScript元素属性的操作 三种: window.onload =function(){ var oTxt = document.ge ...

  9. python web自动化测试框架搭建(功能&接口)——接口用例实现

    测试用例基类: # coding=utf-8 import unittest import Logger log = Logger.Loger() class BaseCase(unittest.Te ...

  10. Kubernetes tutorial - K8S 官方入门教程 中文翻译

    官方教程,共 6 个小节.每一小节的第一部分是知识讲解,第二部分是在线测试环境的入口. kubectl 的命令手册 原文地址 1 创建集群 1.1 使用 Minikube 创建集群 Kubernete ...