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 pause_icon;



function player(path,isMovie = false){
	window.audio=[]; 
	//获取对象LEFT 总宽度
	function getpos(e){
		var obj = e;
		var left = obj.offsetLeft;
		while(obj = obj.offsetParent){
			left+= obj.offsetLeft;
		}
		return left;
	}
	
	var songTime;
	var nowSongTime;
	var mobj;
	if(isMovie == false){ //是否视频  可以改为自动判断拓展名 
		mobj = new Audio(path);	
	}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+"')"
		}
	//获取目标参数
	var t = setInterval(function(timeV=t){
		songTime = mobj.duration;
		nowSongTime = mobj.currentTime;
		inc_lunt.style.width = getInc_pos(100,songTime,nowSongTime)+"%"; //设置进度条
		if(mobj.ended == true){
			console.error("end!");
			clearInterval(t);//停止时移除定时器
		}		
	},100);
	//手动设置播放进度
	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 (){
		//循环绘制视频
		var t3 = window.setInterval(function (){
			if(mobj.ended == true || mobj.paused == true){ //播放停止时移除计时器
				clearInterval(t3);
			}else{
				try{
					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 += '
 
  ';
	h_data += '
  
   '; h_data += '
   
   '; h_data += '
  
  ';
	h_data += '
  
   '; h_data += '
   '; h_data += '
  
  ';
	h_data += '
 ';	
	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();
		} 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);
}