【简单有效！】Gradio利用html插件实现video视频流循环播放

文章目录

• [前言 & 思路](#前言 & 思路)
• 静态资源挂载
• 完整代码
• 结果示例

前言 & 思路

• 需要利用gradio在前端搭建一个页面，循环播放视频。思路是直接调用gr.HTML插件实现，简单有效！！！

静态资源挂载

app.mount("/static", StaticFiles(directory="/mnt/f/VideoChat-cascade_only/static"), name="static")

完整代码

注意：挂载以后，便可以通过static/Avatar1.mp4访问到静态的视频资源啦！

• 利用loop autoplay muted便可以实现视频循环播放！！！

import gradio as gr
import uvicorn
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

def create_gradio():
    html_content = """
    <div style="height: 500px; width: 360px;margin: auto;">
        <video class="video_box" loop autoplay muted>
            <source src="static/Avatar1.mp4" type="video/mp4">
            <span>This video browser does not support</span>
        </video>
    </div>
    """

    # 创建 Gradio 界面
    with gr.Blocks() as demo:
        gr.HTML(html_content, visible=True)
    return demo
    
app = FastAPI()
app.mount("/static", StaticFiles(directory="/mnt/f/gradio_demo/static"), name="static")
gradio_app = create_gradio()
app = gr.mount_gradio_app(app, gradio_app, path='/')
uvicorn.run(app, port = 9999)

结果示例