HTML5播放器实例
鉴于html5Audio and video的使用，设计了一个自定义风格的播放器，除实现一些基本的默认功能之外，还实现了一些高级功能。
具体功能如下：
实现播放暂停按钮
实现静音按钮
实现音量调节滑动条
实现播放进度控制条
实现显示播放时间
实现停止按钮
实现缓冲进度控制条
实现播放速率选择按钮
实现全屏播放按钮
实现关灯按钮
文件目录如下：
1、搭建程序显示框架——video.html
<!DOCTYPE html>
<html>
<head>
<title>Audio and video</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/video.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<header>
<h1>html5 Audio and video</h1>
</header>
<section id="wrapper">
<div class="videoContainer">
<video id="myVideo" src="jiehun.mp4" controls >
sorry ,不支持！
</video>
<div class="caption">html5 Audio and video</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span>/
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">speed:</div>
<div class="btnX1 btn text selected" title="Normal speed">X1</div>
<div class="btnX3 btn text " title="Fast forword X3">X3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight btn lighton" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</section>
<footer>
<span>Write by wang from csust</span>
</footer>
</body>
<script type="text/javascript" src="js/video.js"></script>
</html>
2、播放器样式设计——video.css
.videoContainer{
width: 600px;
height: 350px;
position: relative;
overflow: hidden;
background:#000;
color:#ccc;
}
video{
width: 600px;
height: 350px;
}
.caption{
display:none;
position: absolute;
top:;
left:;
width: 100%;
padding:10px;
color: #ccc;
font-size: 20px;
font-weight: bold;
box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.control{
background:#333;
color: #ccc;
position: absolute;
bottom:;
left:;
width:100%;
z-index:;
display: none;
}
.topControl{
height: 11px;
border-bottom: 1px solid #404040;
padding:1px 5px;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.btmControl{
clear: both;
background:#1F1F1F;
background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
}
.control div.btn{
float: left;
width: 34px;
height: 30px;
padding: 0 5px;
border-right: 1px solid #404040;
cursor: pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width: 20px;
border:none;
color: #777;
}
/*暂停缓冲背景*/
.loading,#init{
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
background: url(../images/loading1.png) no-repeat 50% 50%;
z-index:;
display: none;
}
#init{
background: url(../images/play.png) no-repeat 50% 50% !important;
cursor: pointer;
}
/*控制栏暂停播放按钮*/
.control div.btnPlay{
background:url(../images/play.png) no-repeat 5px 0;
border-left: 1px solid #404040;
}
.control div.paused{
background:url(../images/stop.png) no-repeat 5px 0;
}
/*播放时间和进度控制条样式*/
.progress{
width:85%;
height: 10px;
position: relative;
float: left;
cursor: pointer;
background:#444;
background:-moz-linear-gradient(top,#666,#333);
background:-webkit-linear-gradient(top,#666,#333);
background:-o-linear-gradient(top,#666,#333);
box-shadow: 0 2px 3px #333 inset;
-moz-box-shadow: 0 2px 3px #333 inset;
-webkit-box-shadow: 0 2px 3px #333 inset;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.progress span{
height: 100%;
position: absolute;
top:;
left:;
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.timeBar{
z-index:;
width:;
background:#3FB7FC;
background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
box-shadow: 0 0 1px #fff;
-moz-box-shadow: 0 0 1px #fff;
-webkit-box-shadow: 0 0 1px #fff;
}
.bufferBar{
z-index:;
width:;
background:#777;
background:-moz-linear-gradient(top,#999,#666);
background:-webkit-linear-gradient(top,#999,#666);
background:-o-linear-gradient(top,#999,#666);
box-shadow: 2px 0 5px #333;
-moz-box-shadow: 2px 0 5px #333;
-webkit-box-shadow: 2px 0 5px #333;
}
.time{
width:15%;
float:right;
text-align: center;
font-size: 11px;
line-height: 12px;
}
.control div.sound{
background:url(../images/volumeon.png) no-repeat 0px 0px;
border:none;
float: right;
}
.control div.sound2{
background:url(../images/volumeon.png) no-repeat 0px 0px !important;
}
.control div.muted{
background:url(../images/volumeoff.png) no-repeat 0px 0px !important;
}
.volume{
position: relative;
cursor:pointer;
width:70px;
height: 10px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.volumeBar{
display: block;
height: 100%;
position: absolute;
top:;
left:;
background-color: #eee;
z-index:;
border-radius: 10px;
}
/*播放速率样式*/
.control div.btnStop{
background: url(../images/pause.png) no-repeat 0 0;
}
.control div.spdText{
border:none;
font-size: 14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size: 15px;
color: #ccc;
}
.control div.btnFS{
background: url(../images/fullScreen.png) no-repeat 0 0;
float: right;
}
.control div.btnLight{
background: url(../images/lightoff.png) no-repeat 0 0;
border-left: 1px solid #404040;
float: right;
}
.control div.lighton{
background: url(../images/lighton.png) no-repeat 0 0 !important;
float: right;
}
3、监听控制的JS代码——video.js
$(document).ready(function(){
var video = $('#myVideo');
//关闭播放器默认的风格
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':-45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//监听onloademetadate事件
video.on('loadedmetadata',function(){
$('.caption').animate({'top':-45},300)
//初始化时间显示
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
//在视频显示区添加播放按钮
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function(){
$('.control').stop().animate({'bottom':0},500);
$('.caption').stop().animate({'top':0},500);
})
//$('#init').fadeIn(200);
});
//监听oncanplay事件
video.on('canplay',function(){
$('.loading').fadeOut(100);
});
//监听oncanplaythrough事件
var completeloaded = false;
video.on('canplaythrough',function(){
completeloaded = true;
});
//监听onended事件
video.on('ended',function(){
$('.btnPlay').removeClass("paused");
video[0].paused();
});
//监听onwaiting事件
video.on('waiting',function(){
$('.loading').fadeIn(200);
});
//时间转换函数
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
}
//添加播放和暂停按钮
video.on('click',function(){
playpause();
})
$('.btnPlay').on('click',function(){
playpause();
})
var playpause = function() {
if (video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else{
video[0].pause();
$('.btnPlay').removeClass('paused');
}
}
//监听ontimeupdate事件，动态显示播放时间和进度控制条。
video.on("timeupdate",function(){
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100*currentPos/maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//显示缓冲进度
var startBuffer = function(){
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100*currentBuffer/maxduration;
$('.bufferBar').css('width',perc+'%');
if (currentBuffer<maxduration) {
setTimeout(startBuffer,500);
}
};
//显示播放进度，并监听onmousedown和onmouseup事件
var timeDrag = false;
$('.progress').on('mousedown',function(e){
timeDrag = true;
updatebar(e.pageX);
});
$('.progress').on('mouseup',function(e){
if (timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x){
var progress = $('.progress');
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100*position/progress.width();
if (percentage>100) {percentage = 100;};
if (percentage<0) {percentage = 0;};
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration*percentage/100;
};
//静音按钮
$('.sound').click(function(){
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if (video[0].muted) {
$('.volumeBar').css('width',0);
}else{
$('.volumeBar').css('width',video[0].volume*100+'%');
}
});
//音量调节滑动条
var volumeDrag = false;
$('.volume').on('mousedown',function(e){
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$('.volume').on('mouseup',function(e){
if (volumeDrag) {updateVolume(e.pageX);};
});
var updateVolume = function(x,vol){
var volume = $('.volume');
var percentage;
if (vol) {
percentage = vol*100;
}else{
var position = x - volume.offset().left;
percentage = 100*position/volume.width();
}
if (percentage>100) {percentage=100;};
if (percentage<0) {percentage=0;};
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage/100;
if (video[0].volume==0) {
$('.sound').removeClass('sound2').addClass('muted');
}else if (video[0].volume>0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//播放速率选择按钮
$('.btnX1').on('click',function(){
fastfword(this,1);
});
$('.btnX3').on('click',function(){
fastfword(this,3);
});
var fastfword = function(obj,spd){
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//停止按钮
$('.btnStop').on('click',function(){
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//全屏按钮
$('.btnFS').on('click',function(){
if ($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}else{
alert('sorry,您的浏览器不支持全屏播放！');
}
})
//关灯按钮
$('.btnLight').click(function(){
$(this).toggleClass("lighton");
if (!$(this).hasClass('lighton')){
$('body').append('<div class="overlay"></div>');
$('.overlay').css(
{
'position':'absolute',
'width':100+"%",
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
})
$('.videoContainer').css(
{
'z-index':1000
})
}
else{
$('.overlay').remove();
}
})
})
4、在Google chrome 浏览器中显示如图：
因图标按钮是在网上剪切后调节尺寸所得，所以比较丑，但基本的功能还是有的！
参考书籍：HTML5+CSS3技术应用
参考上一篇博客：http://www.cnblogs.com/zxjwlh/p/4547662.html
HTML5播放器实例的更多相关文章
- 7款超具个性的HTML5播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
- HTML5 播放器
之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...
- HTML5播放器 MediaElement.js 使用方法
目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今 天向大家推荐一款非常优秀的html5播放器MediaElem ...
- html5--视频播放器实例
html5--视频播放器实例 总结: 1.相对定位和绝对定位的区别,两者都是浮起来了 2.属性和方法都是有对象的,搞清楚对象之后,属性和方法就很好用了,我们一般可以用document.getEleme ...
- .NET MVC对接POLYV——HTML5播放器播放加密视频
官方参考文档:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/ 1.上传视频之前根据自己需要对所上传 ...
- wap html5播放器和直播开发小结
此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 去年年中的时候,借着产品改版的机会,将之前的h5播放器好好整理重构了一番.之前的h5播放器较为简陋,有几个大 ...
- HTML5播放器FlowPlayer的极简风格效果
在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.
- HTML5——播放器
有了H5的Video,妈妈再也不用担心我没安Flash插件了 根据Video提供的方法和属性,简单练习了一下,不说废话,直接上图片和代码 <html><head><tit ...
- 博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
随机推荐
- git 保存用户名和密码
打开TortoiseGit控制面板 点击 Edit global .gitconfig文件 添加 [credential] helper = store OK了 你再登录一次之后密码就被记住了
- git 冲突解决
冲突文件的组成 "<<< HEAD"和 "====="之间的为主干内容 "=====" 和 ">>& ...
- java-io-FileReader和FileWriter类
实例:用FileWriter类向文件中写入一个串字符,然后用FileReader读出写入的内容. import java.io.*; public class FileStream2{ public ...
- Extjs-Ext.Ajax.request设置超时
ExtJs的Ajax提交主要是:Ext.Ajax.request或form1.getForm().submit,超时时间默认是30秒. 很多时候,后台处理比较多,往往需要超出30秒的限制.此时,可以通 ...
- dede使用方法----调用导航
在这里,极力推荐学习dede的朋友们观看老李的零基础织梦仿站系列课程的视频,讲的超级棒的~~ 网址链接是:http://www.dede888.com/15daylessons.html. 好了,言归 ...
- MVC3中使用RadioButtonFor()
创建页面 进行初始化 默认 男 被选中 <div class="label"> <div class="editor-label"> ...
- SQL server 那些数据类型不能作为索引
下数据类型不能包括在列存储索引中: ·binary和varbinary ·ntext.text和 image ·varchar(max)和nvarchar(max) ·uniqueidentifier ...
- for循环 打印菱形 空 和 实
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><?ph ...
- Django入门之自定义页面
1.创建项目,创建app django-admin.py startproject HelloWord python3 manage.py startapp sync_one #第二步需要进入Hell ...
- BIEE报表开发
(1)报表开发实例结果图 (2)开发报表步骤: (1)创建分析 (2)创建仪表盘提示 (3)创建仪表盘并发布 登录网址,输入用户名和密码 1) 新建——>分析——>选择主题区域——> ...