zhangkeyang
/
icdd-vsumm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改fetch接口，实现两个位置的视频播放

This commit is contained in:
zhangkeyang 2024-05-07 16:01:07 +08:00
parent ca716a5ed1
commit 031e5d3064
3 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
main.py
View File

@ -4,7 +4,7 @@ import uvicorn
import ffmpeg
from pathlib import Path
from fastapi import FastAPI, UploadFile, Form, File, Header
from fastapi import FastAPI, UploadFile, Form, File, Header, HTTPException
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
@ -37,9 +37,14 @@ async def upload_file(file: UploadFile = File(...)):
return {'status': 200, 'id': video_name}
@app.get("/fetch/{id}")
async def fetch_file(id: str, range: str = Header(None)) -> StreamingResponse:
video_path = Path(os.path.join(ServerConfig.videos_play_path, id + '.mp4'))
@app.get("/fetch/{id}&location={location}")
async def fetch_file(id: str, location: str, range: str = Header(None)) -> StreamingResponse:
if location == "play":
video_path = Path(os.path.join(ServerConfig.videos_play_path, id + '.mp4'))
elif location == "upload":
video_path = Path(os.path.join(ServerConfig.videos_upload_path, id + '.mp4'))
else:
raise HTTPException(status_code=442, detail=f"location {location} is not defined!")
video_size = video_path.stat().st_size
start = 0
end = video_size - 1
@ -135,7 +140,9 @@ async def generate_file(id: str = Form(...)):
out.release()
cap.release()
ffmpeg.input(target_video_path, format='mp4', vcodec='mpeg4').output(final_video_path, format='mp4', vcodec='h264').run()
ffmpeg.input(target_video_path, format='mp4', vcodec='mpeg4') \
.output(final_video_path, format='mp4', vcodec='h264') \
.run(overwrite_output=True)
return {'status': 200, 'id': id}

80
static/index.html
View File

@ -37,49 +37,49 @@
</div>
</div>
</div>
</div>
<!-- 视频展示Modal (默认不显示) -->
<div class="modal fade" id="video-modal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title display-5"></h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<video class="plyr" id="video" playsinline controls muted="unmuted"></video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
<!-- 视频展示Modal (默认不显示) -->
<div class="modal fade" id="video-modal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title display-5"></h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<video class="plyr" id="video" playsinline controls muted="unmuted"></video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
<!-- 中心面板 -->
<div class="container-fluid container-main d-flex flex-column justify-content-center align-items-center">
<div class="container m-3 d-flex justify-content-center align-items-center">
<h1 id="caption" class="text-center display-4"><b>创建视频摘要</b></h1>
</div>
<div class="container m-3 d-flex justify-content-center align-items-center">
<button id="select-video" type="button" class="btn btn-dark btn-lg">选择视频</button>
<input type="file" id="upload-video" style="display: none;" />
</div>
<div class="container m-3 d-flex justify-content-center align-items-center table-responsive">
<table id="status-table" class="table table-hover" style="display: none;">
<thead class="thead-dark">
<tr>
<th style="width: 25%;">文件名</th>
<th style="width: 10%;">文件格式</th>
<th style="width: 10%;">文件大小</th>
<th style="width: 10%;">状态</th>
<th style="width: 35%;">进度</th>
<th style="width: 10%;">操作</th>
</tr>
</thead>
<!-- 注意: 这里的空tr需要保留, 否则table-hover效果将失效 -->
<tr></tr>
</table>
</div>
<!-- 中心面板 -->
<div class="container-fluid container-main d-flex flex-column justify-content-center align-items-center">
<div class="container m-3 d-flex justify-content-center align-items-center">
<h1 id="caption" class="text-center display-4"><b>创建视频摘要</b></h1>
</div>
<div class="container m-3 d-flex justify-content-center align-items-center">
<button id="select-video" type="button" class="btn btn-dark btn-lg">选择视频</button>
<input type="file" id="upload-video" style="display: none;" />
</div>
<div class="container m-3 d-flex justify-content-center align-items-center table-responsive">
<table id="status-table" class="table table-hover" style="display: none;">
<thead class="thead-dark">
<tr>
<th style="width: 25%;">文件名</th>
<th style="width: 10%;">文件格式</th>
<th style="width: 10%;">文件大小</th>
<th style="width: 10%;">状态</th>
<th style="width: 35%;">进度</th>
<th style="width: 10%;">操作</th>
</tr>
</thead>
<!-- 注意: 这里的空tr需要保留, 否则table-hover效果将失效 -->
<tr></tr>
</table>
</div>
</div>
</body>
</html>

2
static/js/index.js
View File

@ -284,7 +284,7 @@ function uploadFile(index, file) {
*/
function playFile(index, file, id) {
$('#video-modal').find('.modal-title').text(`预览${file ? file.name : '此视频'}的关键镜头`);
$('#video-modal').find('video').attr('src', `http://${window.location.hostname}:${window.location.port}/fetch/${id}`);
$('#video-modal').find('video').attr('src', `http://${window.location.hostname}:${window.location.port}/fetch/${id}&location=play`);
var player = new Plyr('video');
$('#video-modal').on('hidden.bs.modal', function(event) {
player.pause();