Initial Commit
commit
082cef6fd3
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,27 @@
|
|||
# Video Site
|
||||
|
||||
* 在线播放视频(使用h5 video).
|
||||
|
||||
* 后台生成视频缩略图.
|
||||
|
||||
* 点击图片即可播放.
|
||||
|
||||
* 支持在线上传视频到服务器(目前只支持mp4和vdat)
|
||||
|
||||
## Web页面
|
||||
|
||||
**index.html**: 额外需要jQuery放置在/js/jquery.js下
|
||||
|
||||
## CGI
|
||||
|
||||
CGI需要HttpWrapper支持.
|
||||
|
||||
**LocalVideoList**: 用于获取本地视频列表.
|
||||
|
||||
**LocalVideoUpload**: 用于处理视频上传.
|
||||
|
||||
**LocalCoverUpdate**: 用于在后台发起缩略图更新.
|
||||
|
||||
## 服务器本地
|
||||
|
||||
**generate_cover.py**: 用于扫描并生成视频的缩略图. 额外需要ffmpeg. 需要有cover文件夹.
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
# coding=gbk
|
||||
import sys
|
||||
import os
|
||||
|
||||
print(sys.getdefaultencoding())
|
||||
|
||||
for root,dirs,files in os.walk('.'):
|
||||
for names in files:
|
||||
if(names.endswith(".mp4")):
|
||||
filename=names[0:-4]
|
||||
print(filename)
|
||||
cmd='ffmpeg -ss 00:00:05.000 -i "'+filename+'.mp4" -vframes 1 "cover/'+filename+'.png" -y'
|
||||
print(cmd)
|
||||
os.system(cmd)
|
||||
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!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>
|
||||
Reference in New Issue