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 import ffmpeg
from pathlib import Path 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.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles from fastapi.staticfiles import StaticFiles
@ -37,9 +37,14 @@ async def upload_file(file: UploadFile = File(...)):
return {'status': 200, 'id': video_name} return {'status': 200, 'id': video_name}
@app.get("/fetch/{id}") @app.get("/fetch/{id}&location={location}")
async def fetch_file(id: str, range: str = Header(None)) -> StreamingResponse: async def fetch_file(id: str, location: str, range: str = Header(None)) -> StreamingResponse:
video_path = Path(os.path.join(ServerConfig.videos_play_path, id + '.mp4')) 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 video_size = video_path.stat().st_size
start = 0 start = 0
end = video_size - 1 end = video_size - 1
@ -135,7 +140,9 @@ async def generate_file(id: str = Form(...)):
out.release() out.release()
cap.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} return {'status': 200, 'id': id}

80
static/index.html
View File

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

2
static/js/index.js
View File

@ -284,7 +284,7 @@ function uploadFile(index, file) {
*/ */
function playFile(index, file, id) { function playFile(index, file, id) {
$('#video-modal').find('.modal-title').text(`预览${file ? file.name : '此视频'}的关键镜头`); $('#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'); var player = new Plyr('video');
$('#video-modal').on('hidden.bs.modal', function(event) { $('#video-modal').on('hidden.bs.modal', function(event) {
player.pause(); player.pause();