canvas 视频音乐播放器
canvas 视频音乐播放器
var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px
var play_sec_img_path = "images/play_btn_s.png";//播放按钮 选中时
var play_clc_img_path = "images/play_btn_c.png";//播放按钮 单击时
var pause_nor_img_path = 'images/pause_btn_n.png';//暂停按钮 正常时
var pause_sec_img_path = "images/pause_btn_s.png";//暂停按钮 选中时
var pause_clc_img_path = "images/pause_btn_c.png";//暂停按钮 单击时
var main_bg = "images/main_UI_bg.png"; //背景图 1920x930 px;
var logo ="images/logo.webm";
var logop;
var pause_icon;
var songTime;
var nowSongTime;
var lunt_update = false;
function player(path=""){
window.audio=[];
var mobj;
var isMovie = getFiletype(path);
window.audio.isMovie = isMovie;
//获取对象LEFT 总宽度
function getpos(e){
var obj = e;
var left = obj.offsetLeft;
while(obj = obj.offsetParent){
left+= obj.offsetLeft;
}
return left;
}
if(isMovie == false){ //是否视频 可以改为自动判断拓展名
mobj = new Audio(path);
logop = document.createElement("video");
document.body.appendChild(logop);
logop.style.display="none";
logop.src=logo;
logop.play();
window.setInterval(function(){
if(logop.ended == true){
logop.play();
}
},100);
}else{
var mobj_style="display:none;"
mobj = document.createElement("video");
document.body.appendChild(mobj);
mobj.setAttribute("style",mobj_style);
mobj.src=path;
}
audio.id=mobj;
setWindow();
var count = 0;
var inc_lunt=document.getElementById("inc_lunt");
var main_lunt = document.getElementById("main_lunt");
mobj.play();
// 设置播放按钮
if(mobj.ended == true || mobj.paused == true){
play_icon.style.background="url('"+play_nor_img_path+"')"
} else {
play_icon.style.background="url('"+pause_nor_img_path+"')"
}
//获取目标参数
;
//手动设置播放进度
main_lunt.onclick = function (e=window.event){ //取得单位位置所处时间 乘以 鼠标所在相对于进度条的位置
console.info(e.clientX+","+e.clientY+":"+getInc_pos(songTime,700,e.clientX - getpos(inc_lunt)));
inc_lunt.style.width = (e.clientX - inc_lunt.offsetLeft)+"px";
mobj.currentTime =getInc_pos(songTime,700,e.clientX - getpos(inc_lunt));
}
mobj.addEventListener("play",function (){
start_update_lunt()
//循环绘制视频
var t3 = window.setInterval(function (){
if(mobj.ended == true || mobj.paused == true){ //播放停止时移除计时器
clearInterval(t3);
}else{
try{
if(window.audio.isMovie == false){
window.audio.rect.drawImage(logop,0,0,900,490); //绘制一帧
}else {
window.audio.rect.drawImage(mobj,0,0,900,490); //绘制一帧
}
}catch(e){
console.error(e.message);//报错
}
}
},100);
},false);
//player 代码结束
}
function setWindow(){
//设置窗口 及UI
var musicWinObj = document.getElementsByClassName("music_win")[0];
var nodeValue="";
nodeValue += "position: absolute;";
nodeValue += "width: 900px;";
nodeValue += "height:550px;";
nodeValue += "margin-top: -275px;";
nodeValue += "margin-left: -450px;";
nodeValue += "left: 50%;";
nodeValue += "top:50%;";
nodeValue += "background:#C3C3C3; z-index:1";
nodeValue += "";
musicWinObj.setAttribute("style",nodeValue);
var h_data='';
h_data += '<div style="position: absolute; width: 900px;height: 60px; background: #F0F0F0;bottom: 0px; margin-left: -450px; left:50%;">';
h_data += '<div style="position: absolute; width: 120px; height: 60px; margin-top: -30px; top:50%;">';
h_data += '<div id="play_icon" style=" position: absolute; width: 60px; height: 60px;margin-left: -30px;left:50%; margin-top: -30px; top:50%;"></div><!--播放按钮-->';
h_data += '</div><!--播放按钮层 -->';
h_data += '<div id="main_lunt" style="width: 700px;height: 10px; border: #000000 1px solid; margin-left: -350px; left:55%;position: absolute; margin-top: -5px; top:50%;">';
h_data += '<div id="inc_lunt" style="height: 10px; background: #000000;left:0%;position: absolute; margin-top: -5px; top:50%;"></div><!--动态进度条-->';
h_data += '</div><div style="border-radius:90deg;"></div><!--进度条-->';
h_data += '</div>';
musicWinObj.innerHTML=h_data;
//创建视频绘画区
var vid_win = document.createElement("canvas");
var vid_win_style = "width: 900px; height: 490px; position:relative; margin-left: -450px; top: 0px; left: 50%; background: #000000;";
vid_win.setAttribute("style",vid_win_style);
vid_win.style.display="block";
musicWinObj.appendChild(vid_win);
vid_win.width="900";
vid_win.height="490";
window.audio.rect = vid_win.getContext("2d"); //取得绘图上下文
//设置播放按钮
play_icon = document.getElementById("play_icon");
play_icon.style.background="url('"+play_nor_img_path+"')"
var main_bg_style = '';
main_bg_style +='position:absolute; width:1920px; height:960px; margin-left:-960px; left:50%; margin-top:-480px; top:50%; z-index:0';
//创建背景区
var main_bg_win = document.createElement("div");
document.body.appendChild(main_bg_win);
main_bg_win.setAttribute("style",main_bg_style);
main_bg_win.style.background="url('"+main_bg+"')";
vid_win.ondblclick =function (){ //双击绘图层 canvas 最大化
if(main_bg_win.style.display != "none" ){
main_bg_win.style.display = "none";
var full_scr_style = "width: 1920px; height: 960px; position:absolute; margin-left: -960px; margin-top: -475px; top: 50%; left: 50%; background: #000000; display:block;z-index:20";
vid_win.setAttribute("style",full_scr_style);
}else{
main_bg_win.style.display = "block";
vid_win.setAttribute("style",vid_win_style);
}
}
//事件绑定 移入移出事件
play_icon.onmousemove=function (){
if(audio.id.ended == true || audio.id.paused == true){
play_icon.style.background="url('"+play_sec_img_path+"')"
} else {
play_icon.style.background="url('"+pause_sec_img_path+"')"
}
}
play_icon.onmouseover=function (){
if(audio.id.ended == true || audio.id.paused == true){
play_icon.style.background="url('"+play_sec_img_path+"')"
} else {
play_icon.style.background="url('"+pause_sec_img_path+"')"
}
}
play_icon.onmouseout=function (){
if(audio.id.ended == true || audio.id.paused == true){
play_icon.style.background="url('"+play_nor_img_path+"')"
} else {
play_icon.style.background="url('"+pause_nor_img_path+"')"
}
}
//播放暂停及图标设置
play_icon.onmousedown=function(){
if(audio.id.ended == true || audio.id.paused == true){
play_icon.style.background="url('"+play_clc_img_path+"')"
audio.id.play();
start_update_lunt();
} else {
play_icon.style.background="url('"+pause_clc_img_path+"')"
audio.id.pause();
}
}
play_icon.onmouseup=function(){
if(audio.id.ended == true || audio.id.paused == true){
play_icon.style.background="url('"+play_nor_img_path+"')"
} else {
play_icon.style.background="url('"+pause_nor_img_path+"')"
}
}
}
function getInc_pos(maxnum,max_t,pos){ //进度条比例计算
return pos*(maxnum/max_t);
}
function getInc_pos_f(maxnum,max_t,pin){ //没有用的 函数
return pin*(max_t/maxnum);
}
function start_update_lunt(){
if(lunt_update == false){
lunt_update = true;
var t = setInterval(function(timeV=t){
songTime = window.audio.id.duration;
nowSongTime = window.audio.id.currentTime;
inc_lunt.style.width = getInc_pos(100,songTime,nowSongTime)+"%"; //设置进度条
if(window.audio.id.ended == true){
lunt_update = false;
console.error("end!");
clearInterval(t);//停止时移除定时器
}
},100)
}
}
function getFiletype(str_path){
/*
var end5 = str_path.substr(str_path.length-6,str_path.length);
console.info(end5);
var pos = end5.indexOf(".");
console.info(pos);
var end5len = end5.length;
console.info(end5len);
var type = end5.substr(pos,end5len-1);
console.info(type);
*/
var pos = str_path.indexOf(".");
var str_path_len = str_path.length;
var type = str_path.substr(pos,str_path_len-1);
console.log(type);
var video = new Array(10);
var music = new Array(10);
video = ["mp4","avi","3gp","webm","mkv","mpg","wmv","vob","flv"];
music = ["mp3","wav","ogg","m4a","amr","m4r","acc","wave","flac"];
for(var i =0;i<10;i++){
if(type == "."+video[i]){
return true;
}
if(type == "."+music[i]){
return false;
}
}
return false;
}
