159 lines
4.6 KiB
HTML
159 lines
4.6 KiB
HTML
<!DOCTYPE>
|
|
<html>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<title>XV Homepage</title>
|
|
<div>
|
|
<div>
|
|
<input type="text" id="keyword">
|
|
<input type="button" id="search_btn" value="搜索">
|
|
<input type="button" id="reset_btn" value="清除搜索">
|
|
</div>
|
|
<div>
|
|
<form enctype='multipart/form-data' action="/cgi-bin/LocalVideoUpload.exe" method="post">
|
|
<input type="file" name='pics' multiple>
|
|
<input type="submit" value="上传文件">
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<input type="button" id="update_cover" value="刷新缩略图(后台)">
|
|
<input type="button" id="update_vinfo" value="刷新视频信息">
|
|
<input type="button" id="stop_all" value="停止所有播放">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="total_info">
|
|
|
|
</div>
|
|
|
|
<div id="board">
|
|
|
|
</div>
|
|
|
|
<script src="/js/jquery.js"></script>
|
|
<script>
|
|
var flist;
|
|
var fsize;
|
|
var last_played=-1
|
|
|
|
function getNameByID(vid) {
|
|
return flist[vid]
|
|
}
|
|
|
|
function getIDByName(vname) {
|
|
$.each(flist,function(idx,name){
|
|
if(vname==name) return idx
|
|
})
|
|
}
|
|
|
|
function fillVideo(vid) {
|
|
var name=getNameByID(vid)
|
|
$("#video_source").attr('src',"http://192.168.31.102:9000/OutSideVideo/"+name+".mp4")
|
|
$("#player").get(0).load()
|
|
$("#player").get(0).play()
|
|
}
|
|
|
|
function extendToPlayer(vid) {
|
|
var name=getNameByID(vid)
|
|
var realname=decodeURI(name)
|
|
$("#vid_"+String(vid)).empty()
|
|
$("#vid_"+String(vid)).append("<p><video id='video_playing' src='http://192.168.31.102:9000/OutSideVideo/"+name+".mp4' controls autoplay></video></p><p><font color='blue'>Playing: "+realname+"</font></p>")
|
|
$("#video_playing").on('loadedmetadata',function(){
|
|
var video_playing=$("#video_playing")
|
|
if(video_playing.attr('adjusted')!="yes") {
|
|
if(video_playing.get(0).videoWidth<1024 ||
|
|
video_playing.get(0).videoHeight<768) {
|
|
console.log("video_playing: width="+String(video_playing.get(0).videoWidth)+" height:"+String(video_playing.get(0).videoHeight))
|
|
video_playing.attr('width',1024)
|
|
video_playing.attr('height',768)
|
|
video_playing.attr('adjusted','yes')
|
|
video_playing.get(0).load()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function resetToInfo(vid) {
|
|
var name=getNameByID(vid)
|
|
var realname=decodeURI(name)
|
|
$("#vid_"+String(vid)).empty()
|
|
$("#vid_"+String(vid)).append("<p><a onclick='switchPlayer("+String(vid)+")'>"+
|
|
"<img src='http://192.168.31.102:9000/OutSideVideo/cover/"+name+".png'></a></p>"+
|
|
"<p>"+realname+"</p>")
|
|
}
|
|
|
|
function switchPlayer(vid) {
|
|
if(last_played>=0) resetToInfo(last_played)
|
|
last_played=vid
|
|
extendToPlayer(vid)
|
|
}
|
|
|
|
function addToBoard(vid) {
|
|
var name=getNameByID(vid)
|
|
var realname=decodeURI(name)
|
|
$("#board").append("<div id='vid_"+String(vid)+"'></div>")
|
|
resetToInfo(vid)
|
|
}
|
|
|
|
function updateTotal(size) {
|
|
$("#total_info").empty()
|
|
$("#total_info").append("<p> Totally "+String(size)+" results.</p>")
|
|
}
|
|
|
|
function updateVideoInfo() {
|
|
$.post("/cgi-bin/LocalVideoList.exe",function(data){
|
|
fsize=0
|
|
index=0
|
|
flist=data['files']
|
|
$.each(flist,function(idx,name){
|
|
addToBoard(idx)
|
|
fsize++;
|
|
})
|
|
updateTotal(fsize)
|
|
},'json').fail(function(err){
|
|
console.log("Failed.")
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
$("#search_btn").click(function(){
|
|
var keyword=$("#keyword").val()
|
|
var lsize=0
|
|
$("#board").empty()
|
|
$.each(flist,function(idx,name){
|
|
var realname=decodeURI(name)
|
|
if(realname.indexOf(keyword)!=-1) {
|
|
addToBoard(idx)
|
|
lsize++
|
|
}
|
|
})
|
|
updateTotal(lsize)
|
|
})
|
|
|
|
$("#reset_btn").click(function(){
|
|
$("#keyword").val("")
|
|
$("#board").empty()
|
|
$.each(flist,function(idx,name){
|
|
addToBoard(idx)
|
|
})
|
|
updateTotal(fsize)
|
|
})
|
|
|
|
$("#update_cover").click(function(){
|
|
window.location.href="/cgi-bin/LocalCoverUpdate.exe"
|
|
})
|
|
|
|
$("#update_vinfo").click(function(){
|
|
$("#update_total").empty()
|
|
$("#board").empty()
|
|
updateVideoInfo()
|
|
})
|
|
|
|
$("#stop_all").click(function(){
|
|
if(last_played>=0) resetToInfo(last_played)
|
|
last_played=-1
|
|
})
|
|
|
|
updateVideoInfo()
|
|
</script>
|
|
|
|
</html> |