代码实例:

<!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. 【HDOJ6614】AND Minimum Spanning Tree(签到)

    题意:给定标号从1到n的n个点,链接两个点x,y的代价为x AND y,求最小生成树总代价与满足代价最小的前提下字典序最小的方案 n<=2e5 思路: #include<bits/stdc ...

  2. html from表单异步处理

    from表单异步处理. 简单处理方法: jQuery做异步提交表单处理, 通过$("#form").serialize()将表单元素的数据转化为字符串, 最后通过$.ajax()执 ...

  3. oracle SQL in plsql

    刚安装好的oracle和plsql,以oracle11g为例 1.刚安装好后有两个默认的系统账号和初始密码:sys/change_on_install,system/manager 2.如果忘记了或不 ...

  4. loj#501 「LibreOJ β Round」ZQC 的树列

    分析 代码(我的代码是瞎jb水过去的) #include<bits/stdc++.h> using namespace std; #define li long long li a[]; ...

  5. polly的几种常用方法

    参考资料:https://www.cnblogs.com/edisonchou/p/9159644.html 特征:可以实现一些代码的熔断和降级 代码: ////普通,其中 Fallback相当于降级 ...

  6. elasticsearch 集群搭建及启动常见错误

    1.系统环境 三台服务器(最好是单数台,跟master选举方式有关),确保机器互相ping的通,且都需要装了jdk 8环境,机器IP和 elasticsearch 的节点名称如下: cluster n ...

  7. 【CDN+】 Kylin 的初步认识与理解

    前言 项目中用到了Kylin框架来处理数据,那么作为项目成员需要了解哪些关于Kylin的知识呢,本文就Kylin得基本概念和原理进行简述. Kylin基本概念 首先想到的学习路径是Kylin官网: h ...

  8. statistics——数学统计函数

    statistics——数学统计函数 转自:https://blog.csdn.net/zhtysw/article/details/80005410 资源代码位置:Lib/statistixs.py ...

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

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

  10. Vagrant 官网文档翻译汇总

    入门 Vagrant 入门 - 项目设置 Vagrant 入门 - box Vagrant 入门 - 启动 vagrant 及 通过 ssh 登录虚拟机 Vagrant 入门 - 同步目录(synce ...