jPlayer简介：

想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。

jPlayer实现：

先引入

HTML

    
         
     	
      		
       
        
         设备通道		
          
           
            
            
              
              
                
                
                    
                  
                  
                   
                    视频画面 
                     
                      
                       
                        
                         
                          
                          
                           play  
                            
                             
                              
                                 
                               
                                  
                                
                                   
                                  
                                   
                                   
                                    play 
                                    
                                     stop  
                                      
                                      
                                       mute 
                                       
                                        max volume 
                                         
                                            
                                           
                                           
                                            repeat 
                                            
                                             full screen         
                                              
                                              
                                               
                                                搜索录像 
                                                 
                                                 
 
                                                  
                                                   
                                                    设备名称:
                                                    
                                                    
                                                     监控通道:
                                                     
                                                    
                                                   
 
                                                  
                                                   
                                                    开始日期:
                                                    
                                                    
                                                     结束日期:
                                                     
                                                    
                                                   
 
                                                  
                                                   
                                                    查找录像
                                                   
 
                                                 
  
                                                 
                                                  
                                                   录像文件 
                                                    
                                                      
                                                     
                                                      序号 视频名称 
                                                      
                                                       操作  
                                                         
                                                              
                                                        
                                                       
                                                      
                                                     
                                                    
                                                   
                                                  
                                                 
                                                
                                               
                                              
                                             
                                            
                                           
                                          
                                         
                                        
                                       
                                      
                                     
                                    
                                   
                                  
                                 
                                
                               
                              
                             
                            
                           
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

js

        var f = 0;	$(function() {		$("#jquery_jplayer_1").jPlayer({			ready: function () {				$(this).jPlayer("setMedia", {					m4v: "",				});			},			pause: function (event){				$("#"+playfile+"tr").attr("ondblclick","keepplay(this)");				$("#"+playfile+"td").attr('src','../../../imgs/1097510.png'); 				$("#"+playfile+"td").removeAttr('onclick');				$("#"+playfile+"td").attr("onclick","keepplay(this)");			},			play: function (event){				$("#"+playfile+"tr").attr("ondblclick","StopPlayback(this)");				$("#"+playfile+"td").attr('src','../../../imgs/1097509.png'); 				$("#"+playfile+"td").removeAttr('onclick');				$("#"+playfile+"td").attr("onclick","StopPlayback(this)");			},			ended: function (event){				$("#"+playfile+"tr").attr("ondblclick","viewplay(this)");				$("#"+playfile+"td").attr('src','../../../imgs/1097510.png'); 				$("#"+playfile+"td").removeAttr('onclick');				$("#"+playfile+"td").attr("onclick","viewplay(this)");			},			resize: function (event){				if(f % 2 != 0){					$("#jp_container_1").css({ 	 					'width' : ($("#con2").width()), 	 					'height' : ($("#con2").height()) 	 				}); 	 				$(".jp-type-single").css({ 	 					'width' : ($("#jp_container_1").width()), 	 					'height' : ($("#jp_container_1").height()) 	 				}); 	 				$("#jquery_jplayer_1").css({ 	 					'width' : ($("#con2").width()), 	 					'height' : ($("#con2").height()-71) 	 				}); 	 				$("#jp_video_0").css({ 	 					'width' : ($("#jquery_jplayer_1").width()), 	 					'height' : ($("#jquery_jplayer_1").height()) 	 				});				}				f += 1;				flag = "true";			},			swfPath: "${ctx}/js/jPlayer-2.9.1/jquery.jplayer.swf", 			supplied: "mp4, webmv, ogv, m4v",			useStateClassSkin: true,			autoBlur: false,			smoothPlayBar: true,			keyEnabled: true,			remainingDuration: false,			toggleDuration: true		});		$("#jp_container_1").css({				'width' : ($("#con2").width()),				'height' : ($("#con2").height())			});		$(".jp-type-single").css({			'width' : ($("#jp_container_1").width()),			'height' : ($("#jp_container_1").height())		});		$("#jquery_jplayer_1").css({			'width' : ($("#con2").width()),			'height' : ($("#con2").height()-71)		});		$("#jp_video_0").css({			'width' : ($("#jquery_jplayer_1").width()),			'height' : ($("#jquery_jplayer_1").height())		});	});});........................function skip(obj){	pg = obj.getAttribute("name");	view_table(json,pagenum);	if(playfile != ""){		$("#"+playfile).attr('src','../../../imgs/1097509.png');		$("#"+playfile).removeAttr('onclick');		$("#"+playfile).attr("onclick","StopPlayback(this)");	}}function viewplay(obj){	if(playfile != ""){		$("#"+playfile).attr('src','../../../imgs/1097510.png');		$("#"+playfile).removeAttr('onclick');		$("#"+playfile).attr("onclick","viewplay(this)");	}	playfile = obj.getAttribute("file");	var filename = obj.getAttribute("name");	var file = $(obj).attr('file');	$("#"+file+"tr").attr("ondblclick","StopPlayback(this)");	$("#"+file+"td").attr('src','../../../imgs/1097509.png');	$("#"+file+"td").removeAttr('onclick');	$("#"+file+"td").attr("onclick","StopPlayback(this)");	var mp4path = "../../../files/"+filename;	$("#jquery_jplayer_1").jPlayer("setMedia", {  		m4v: mp4path,    });	$("#jp_video_0").css({		'width' : ($("#jquery_jplayer_1").width()),		'height' : ($("#jquery_jplayer_1").height())	});	$("#jquery_jplayer_1").jPlayer("play");}function StopPlayback(obj) {	if($(obj).attr('vc') == "tr"){		var file = $(obj).attr('file');		$("#"+file+"tr").attr("ondblclick","keepplay(this)");		$("#"+file+"td").attr('src','../../../imgs/1097510.png');		$("#"+file+"td").removeAttr('onclick');		$("#"+file+"td").attr("onclick","keepplay(this)");	}else if($(obj).attr('vc') == "td"){		var file = $(obj).attr('file');		$("#"+file+"tr").attr("ondblclick","keepplay(this)");		$("#"+file+"td").attr('src','../../../imgs/1097510.png');		$("#"+file+"td").removeAttr('onclick');		$("#"+file+"td").attr("onclick","keepplay(this)");	}	$("#jquery_jplayer_1").jPlayer("pause");}function keepplay(obj){	if($(obj).attr('vc') == "tr"){		var file = $(obj).attr('file');		$("#"+file+"tr").attr("ondblclick","StopPlayback(this)");		$("#"+file+"td").attr('src','../../../imgs/1097509.png');		$("#"+file+"td").removeAttr('onclick');		$("#"+file+"td").attr("onclick","StopPlayback(this)");	}else if($(obj).attr('vc') == "td"){		var file = $(obj).attr('file');		$("#"+file+"tr").attr("ondblclick","StopPlayback(this)");		$("#"+file+"td").attr('src','../../../imgs/1097509.png');		$("#"+file+"td").removeAttr('onclick');		$("#"+file+"td").attr("onclick","StopPlayback(this)");	}	$("#jquery_jplayer_1").jPlayer("play");}