最新消息:

HTML5播放器

其他类 knitter 195浏览 0评论

基于HTML5的播放器,仅供娱乐,请使用Chrome或者安装了quicktime的Safari浏览效果。

使用HTML5 Video API实现播放、暂停、停止播放、上一个视频、下一个视频、全屏播放、缓冲进度、播放进度、播放列表、音量控制、播放时间显示等功能。使用HTML5拖放API实现本地mp4视频拖到视频窗口播放功能(慎用,测试时请拖一个小于10M的)。使用CSS3实现一些视觉效果。


[runcode]




HTML5 Video Player_Written by DG


  • 00:00/00:00
  • 停止播放
  • 上一个文件
  • 播放暂停
  • 下一个文件
  • 声音开关
  • 调整音量
  • 全屏控制
  • 文件列表




[/runcode]

HTML代码

[html]
<div id="videobox" class="hvp_normal">
<video id="video" poster="http://ossweb-img.qq.com/images/yl/web201006/mp4_pic.jpg"></video>
<div id="hvp_box">
<ul id="hvp_prog"><li></li><li></li></ul>
<ul id="hvp_ctrl">
<li><span>00:00</span>/<span>00:00</span></li>
<li><span><strong>停止播放</strong></span></li>
<li><span><strong>上一个文件</strong></span></li>
<li><span class="hvp_play"><strong>播放暂停</strong></span></li>
<li><span><strong>下一个文件</strong></span></li>
<li><span class="hvp_open"><strong>声音开关</strong></span></li>
<li><span><strong>调整音量</strong></span></li>
<li><span class="hvp_small"><strong>全屏控制</strong></span></li>
<li><span><strong>文件列表</strong></span></li>
</ul>
</div>
<ul id="hvp_menu" style="display:none;"></ul>
</div>
<p id="p"></p>
[/html]

CSS代码

[css]
* { margin: 0; padding: 0;}
body { font: normal 12px Tahoma;}
ol,ul { list-style: none;}
a { text-decoration: none;}
a:hover { text-decoration: underline;}
img { border:0;}
/*定义播放器样式*/
#videobox { background: #000000; position: relative; overflow: hidden;}
.hvp_normal { width: 570px; height: 360px;}
.hvp_fullscr { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000;}
#video { width: 100%; height: 100%; overflow: hidden; cursor: pointer; float: left;}
#hvp_box,#hvp_ctrl li span { background-image: url(http://ossweb-img.qq.com/images/yl/web200910/video.png);}
#hvp_box { width: 100%; height: 41px; background-repeat: repeat-x; overflow: hidden; position: absolute; left: 0; z-index: 100;}
#hvp_box ul { overflow: hidden;}
#hvp_prog { height: 5px; position: relative; cursor: pointer;}
#hvp_prog li { height: 3px; background-repeat: repeat-x; overflow: hidden; position: absolute; top: 1px; left: 1px;}
#hvp_prog :nth-child(1) { background: #666666; opacity: 0.8;}
#hvp_prog :nth-child(2) { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CCFF), to(#008DE0));}
#hvp_ctrl { height: 36px; text-align: center; position: relative;}
#hvp_ctrl li { display: inline-block; vertical-align: top; padding: 0 12px; height: 36px; line-height: 36px; color: #CCCCCC;}
#hvp_ctrl li span { display: block; background-repeat: no-repeat; opacity: 0.6; cursor: pointer;}
#hvp_ctrl li span:hover { opacity: 1;}
#hvp_ctrl span strong { display: none;}
#hvp_ctrl :nth-child(1) span { background: none; display: inline; cursor: default; opacity: 1;}
#hvp_ctrl :nth-child(2) span { width: 11px; height: 11px; margin-top: 13px; background-position: -94px -41px;}
#hvp_ctrl :nth-child(3) span,#hvp_ctrl :nth-child(5) span { width: 12px; height: 13px; margin-top: 12px;}
#hvp_ctrl :nth-child(3) span { background-position: -70px -41px;}
#hvp_ctrl :nth-child(4) span { width: 70px; height: 36px;}
#hvp_ctrl span.hvp_play { background-position: 0 -41px;}
#hvp_ctrl span.hvp_pause { background-position: -190px -41px;}
#hvp_ctrl :nth-child(5) span { background-position: -82px -41px;}
#hvp_ctrl :nth-child(6) span { width: 14px; height: 13px; margin-top: 12px;}
#hvp_ctrl span.hvp_open { background-position: -105px -41px;}
#hvp_ctrl span.hvp_mute { background-position: -155px -41px;}
#hvp_ctrl :nth-child(7) span { width: 60px; height: 6px; border: 1px solid #000000; margin-top: 14px; background-position: -70px -59px;}
#hvp_ctrl :nth-child(8) { position: absolute; top: 0; right: 0;}
#hvp_ctrl :nth-child(8) span { width: 18px; height: 18px; margin-top: 8px;}
#hvp_ctrl span.hvp_small { background-position: -119px -41px;}
#hvp_ctrl span.hvp_full { background-position: -137px -41px;}
#hvp_ctrl :nth-child(9) { position: absolute; top: 0; left: 0;}
#hvp_ctrl :nth-child(9) span { width: 13px; height: 12px; margin-top: 12px; background-position: -169px -41px;}
#hvp_menu { background: #060606; width: 120px; float: right; overflow: auto; vertical-align: top;}
#hvp_menu::-webkit-scrollbar { width: 10px; background: #222222;}
#hvp_menu::-webkit-scrollbar-thumb { background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#555555), to(#444444)); -webkit-border-radius: 5px;}
#hvp_menu li { text-align: center; padding-bottom: 5%; opacity: 0.6;}
#hvp_menu li:hover { opacity: 1;}
#hvp_menu a { color: #666666;}
#hvp_menu img { display: block; width: 87px; height: 71px; margin: 5% auto; border: 1px solid #000000;}
#hvp_menu a.hvp_now { color: #FFFFFF;}
#hvp_menu a.hvp_now img { border-color: #CCCCCC;}
[/css]

JS代码

[js]
(function(){
var resource=[
["http://down.qq.com/xgame/other/video/video1.mp4","http://ossweb-img.qq.com/images/yl/web201006/video1_ov.jpg","王者概念视频"],
["http://down.qq.com/xgame/other/video/video2.mp4","http://ossweb-img.qq.com/images/yl/web201006/video2_ov.jpg","虫洞副本演示"],
["http://down.qq.com/xgame/other/video/video3.mp4","http://ossweb-img.qq.com/images/yl/web201006/video3_ov.jpg","女子十二乐坊"],
["http://down.qq.com/xgame/other/video/video.mp4","http://ossweb-img.qq.com/images/yl/web201006/video4_ov.jpg","游戏特效演示"],
["http://down.qq.com/xgame/other/video/video5.mp4","http://ossweb-img.qq.com/images/yl/web201006/video5_ov.jpg","技术测试纪念版"],
["http://down.qq.com/xgame/other/video/video6.mp4","http://ossweb-img.qq.com/images/yl/web201006/video6_ov.jpg","坐骑任务"]
];
var getid=function(id){
return document.getElementById(id);
};
var gettag=function(id,tag){
return id.getElementsByTagName(tag);
};
var video={
parent:getid("videobox"),
self:getid("video"),
ctrlbox:getid("hvp_box"),
progr:getid("hvp_prog"),
progrbuf:gettag(getid("hvp_prog"),"li")[0],
progrnow:gettag(getid("hvp_prog"),"li")[1],
timenow:gettag(getid("hvp_ctrl"),"span")[0],
timeall:gettag(getid("hvp_ctrl"),"span")[1],
vstop:gettag(getid("hvp_ctrl"),"span")[2],
prev:gettag(getid("hvp_ctrl"),"span")[3],
ctrl:gettag(getid("hvp_ctrl"),"span")[4],
next:gettag(getid("hvp_ctrl"),"span")[5],
sound:gettag(getid("hvp_ctrl"),"span")[6],
volume:gettag(getid("hvp_ctrl"),"span")[7],
vscreen:gettag(getid("hvp_ctrl"),"span")[8],
menu:gettag(getid("hvp_ctrl"),"span")[9],
menubox:getid("hvp_menu"),
menus:null,
showctrl:null,
hiddenctrl:null,
delayctrl:null,
buf:null,
poffset:null,
voffset:60,
nowplay:0
};
var func={
//定义播放/暂停函数
ctrl:function(){
if(video.ctrl.className=="hvp_play"){
video.self.play();
video.ctrl.className="hvp_pause";
}
else{
video.self.pause();
video.ctrl.className="hvp_play";
};
},
pause:function(){
video.ctrl.className="hvp_pause";
},
//定义停止播放函数
vstop:function(){
video.ctrl.className="hvp_play";
video.self.load();
},
//定义进度栏
progr:function(){
video.progrnow.style.width=video.self.currentTime/video.self.duration*100+"%";
},
goto:function(){
video.poffset=window.event.clientX-video.progrnow.offsetLeft;
if(video.poffset<=video.progr.offsetWidth&&video.poffset>=0){
video.self.play();
video.self.currentTime=video.poffset/video.progr.offsetWidth*video.self.duration;
};
},
//定义缓冲栏
buf:function(){
if(video.self.buffered.length>=1){
video.progrbuf.style.width=video.self.buffered.end(0)/video.self.duration*100+"%";
if(video.self.buffered.end(0)==video.self.duration) clearInterval(video.buf);
}
else clearInterval(video.buf);
},
setbuf:function(){
video.buf=setInterval(func.buf,20);
},
//定义播放时间函数
time:function(time){
var time={
mi_ord:parseInt(time/60),
se_ord:parseInt(time%60),
mi:"",
se:""
};
time.mi=(time.mi_ord<10)?"0"+time.mi_ord:time.mi_ord;
time.se=(time.se_ord<10)?"0"+time.se_ord:time.se_ord;
return time.mi+":"+time.se;
},
timenow:function(){
video.timenow.innerHTML=func.time(video.self.currentTime);
},
timeall:function(){
video.timeall.innerHTML=func.time(video.self.duration);
},
//定义声音开关
sound:function(){
if(video.self.muted){
video.self.muted=false;
video.sound.className="hvp_open";
video.volume.style.backgroundPosition=video.voffset-130+"px -59px";
}
else{
video.self.muted=true;
video.sound.className="hvp_mute";
video.volume.style.backgroundPosition="-130px -59px";
};
},
//定义音量函数
volume:function(){
video.voffset=window.event.clientX-video.volume.offsetLeft;
if(video.voffset<=60&&video.voffset>0){
video.self.volume=video.voffset/60;
video.volume.style.backgroundPosition=video.voffset-130+"px -59px";
};
if(video.self.muted){
func.sound();
}
},
//定义控制栏显示/隐藏函数
show:function(){
if(parseInt(video.ctrlbox.style.bottom)>=-41&&parseInt(video.ctrlbox.style.bottom)<0){
video.ctrlbox.style.bottom=parseInt(video.ctrlbox.style.bottom)+1+"px";
}
else{
clearInterval(video.hiddenctrl);
video.hiddenctrl=null;
};
},
hidden:function(){
if(parseInt(video.ctrlbox.style.bottom)>-41&&parseInt(video.ctrlbox.style.bottom)<=0){
video.ctrlbox.style.bottom=parseInt(video.ctrlbox.style.bottom)-1+"px";
}
else{
clearInterval(video.showctrl);
video.showctrl=null;
};
},
clear:function(){
if(video.hiddenctrl){
clearInterval(video.hiddenctrl);
video.hiddenctrl=null;
};
if(video.showctrl){
clearInterval(video.showctrl);
video.showctrl=null;
};
if(video.delayctrl){
clearInterval(video.delayctrl);
video.delayctrl=null;
};
},
//绑定控制栏显示/隐藏事件
leave:function(){
func.clear();
video.hiddenctrl=setInterval(func.hidden,40);
},
boxset:function(){
video.self.onmouseover=video.ctrlbox.onmouseover=function(){
func.clear();
video.showctrl=setInterval(func.show,4);
};
video.self.onmouseout=video.ctrlbox.onmouseout=function(){
video.delayctrl=setTimeout(func.leave,2000);
};
},
//定义全屏播放
vscreen:function(){
if(video.vscreen.className=="hvp_small"){
video.parent.className="hvp_fullscr";
video.vscreen.className="hvp_full";
}
else{
video.parent.className="hvp_normal";
video.vscreen.className="hvp_small";
};
func.dim();
},
//定义控制栏宽度
dim:function(){
video.progr.style.width=video.parent.offsetWidth-1+"px";
video.menubox.style.height=video.parent.offsetHeight+"px";
if(video.menubox.style.display=="block") video.self.style.width=video.parent.offsetWidth-120+"px";
},
//动态加载视频
vload:function(which){
if(video.menus) video.menus[which].className="hvp_now";
video.self.setAttribute("src",resource[which][0]);
video.self.load();
video.self.play();
},
prev:function(){
if(video.nowplay>0){
if(video.menus) video.menus[video.nowplay].className="";
video.nowplay--;
func.vload(video.nowplay);
}
else alert("已是第一个视频");
},
next:function(){
if(video.nowplay<resource.length-1){
if(video.menus) video.menus[video.nowplay].className="";
video.nowplay++;
func.vload(video.nowplay);
}
else{
alert("已是最后一个视频,将从第一个视频开始播放");
if(video.menus) video.menus[video.nowplay].className="";
video.nowplay=0;
func.vload(video.nowplay);
}
},
//本地拖放文件播放
drop:function(e){
if (e.preventDefault) e.preventDefault();
var reader=[],file=e.dataTransfer.files;
for(var i=0;i<file.length;i++){
reader[i]=new FileReader();
reader[i].count=i;
if(file[i].type!="video/mp4"){
alert("Sorry, this is not a mp4 file.");
return;
};
reader[i].readAsDataURL(file[i]);
reader[i].onloadend=function(){
resource.push([reader[this.count].result,"video/noimage.png",file[this.count].fileName]);
if(video.menus){
video.menubox.innerHTML+='<li><a href="#"><img src="http://ossweb-img.qq.com/images/yl/web200910/noimage.png" alt="" />'+file[this.count].fileName+'</a></li>';
video.menus[video.nowplay].className="";
}
video.nowplay=resource.length-file.length;
func.vload(video.nowplay);
if(video.menus) func.menuclick();
};
}
},
cancel:function(e){
if(e.preventDefault) e.preventDefault();
},
//定义播放列表
menu:function(){
if(video.menubox.style.display=="none"){
video.self.style.width=video.parent.offsetWidth-120+"px";
video.menubox.innerHTML="";
for(var i=0;i<resource.length;i++){
video.menubox.innerHTML+='<li><a href="#"><img src="'+resource[i][1]+'" alt="" />'+resource[i][2]+'</a></li>';
};
func.menuclick();
video.menubox.style.display="block";
}
else{
video.self.style.width="100%";
video.menubox.style.display="none";
};
},
menuclick:function(){
video.menus=gettag(video.menubox,"a");
for(var i=0;i<resource.length;i++){
if(i==video.nowplay) video.menus[i].className="hvp_now";
video.menus[i].count=i;
video.menus[i].onclick=function(){
video.menus[video.nowplay].className="";
func.vload(this.count);
video.menus[this.count].className="hvp_now";
video.nowplay=this.count;
return false;
};
};
}
};
//监听开始
video.self.addEventListener("click",func.ctrl,false); //点击视屏控制播放暂停
video.self.addEventListener("play",func.boxset,false);//开始播放后允许控制栏显示隐藏
video.self.addEventListener("play",func.pause,false);//开始播放时将播放按钮切换为暂停按钮
video.self.addEventListener("ended",func.next,false);//播放结束时将暂停按钮切换为播放按钮
video.self.addEventListener("timeupdate",func.progr,false);//呈现播放进度
video.self.addEventListener("loadeddata",func.setbuf,false);//呈现缓冲进度
video.self.addEventListener("timeupdate",func.timenow,false);//显示当前播放时间
video.self.addEventListener("loadedmetadata",func.timeall,false);//显示视频总时间
video.self.addEventListener("loadedmetadata",func.leave,false);//播放时自动隐藏控制栏
video.progr.addEventListener("click",func.goto,false);//通过进度栏跳帧
video.sound.addEventListener("click",func.sound,false);//控制静音
video.volume.addEventListener("click",func.volume,false);//音量控制
video.vstop.addEventListener("click",func.vstop,false);//控制停止播放
video.prev.addEventListener("click",func.prev,false);//加载上一个文件
video.next.addEventListener("click",func.next,false);//加载下一个文件
video.ctrl.addEventListener("click",func.ctrl,false);//控制开始播放
video.vscreen.addEventListener("click",func.vscreen,false);//控制全屏播放
video.menu.addEventListener("click",func.menu,false);//显示播放列表
window.addEventListener("resize",func.dim,false);//浏览器窗口调整时更新进度栏宽度
//监听文件拖放
video.self.addEventListener("drop",func.drop,false);
video.self.addEventListener('dragover',func.cancel,false);
video.self.addEventListener('dragenter',func.cancel,false);
//初始化
video.ctrlbox.style.bottom=0;
func.dim();//初始化进度栏宽度
func.vload(video.nowplay);//加载视频
})();
[/js]

转载请注明:文档库 » HTML5播放器

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址