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

文章目录

前言 & 思路

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

静态资源挂载

python 复制代码
app.mount("/static", StaticFiles(directory="/mnt/f/VideoChat-cascade_only/static"), name="static")

完整代码

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

  • 利用loop autoplay muted便可以实现视频循环播放!!!
python 复制代码
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)

结果示例

相关推荐
光影少年2 分钟前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
小磊哥er14 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆14 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021122 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边8 小时前
Cursor 进阶使用教程
前端·ai编程·cursor