基于jQuery的视频和音频播放器jPlayer
jPlayer简介：
想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。
jPlayer实现：
先引入
<link rel="stylesheet" type="text/css" href="${ctx}/js/jPlayer-2.9.1/skin/blue.monday/jplayer.blue.monday.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="${ctx}/js/jPlayer-2.9.1/jquery.jplayer.js"></script>
HTML
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<div id="container" style="min-width: 1300px;overflow-x:auto;overflow-y:hidden;">
<div id="left">
<div id="ltitle"><div class="dtit">设备通道</div></div>
<div id="con1">
<div class="search-box">
<div class="search1"></div>
<div class="search2"><input type="text" id="search_condition" name="search_condition" onkeydown="keyLogin(event)" placeholder="请输入搜索内容"/></div>
<div class="search3" id="search3" onclick="search()"></div>
<div class="search4" onclick="reset()"></div>
</div>
<div id="tree" class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
<div id="mid">
<div id="mtitle"><div class="dtit">视频画面</div></div>
<div id="con2">
<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="right">
<div class="rtitle"><div class="dtit">搜索录像</div></div>
<div id="search">
<ul>
<li><span class="dec">设备名称:</span><input type="text" name="devname" id="devname" readonly="readonly" /><span class="ded">监控通道:</span><input type="text" name="devcnt" id="devcnt" readonly="readonly"/></li>
<li><span class="dec">开始日期:</span><input type="text" name="startime" id="startime" onFocus="WdatePicker({isShowClear:false,readOnly:true,maxDate:'%y-%M-%d'})"/><span class="ded">结束日期:</span><input type="text" name="stoptime" id="stoptime" onFocus="WdatePicker({isShowClear:false,readOnly:true,minDate:'#F{$dp.$D(\'startime\',{d:0});}',maxDate:'#F{$dp.$D(\'startime\',{d:1});}'})" /></li>
<li><span id="search_view" onClick="SearchFiles()">查找录像</span></li>
</ul>
</div>
<div class="rtitle"><div class="dtit">录像文件</div></div>
<div id="viewfile">
<table class="file_table">
<thead><tr>
<th width="45">序号</th>
<th>视频名称</th>
<th width="70">操作</th>
</tr></thead>
<tbody id="c"></tbody>
</table>
<div id="d"></div>
</div>
</div>
</div>
</body>
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");
}