【简单有效!】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)

结果示例

相关推荐
你的人类朋友18 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API19 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx20 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶20 小时前
webpack学习
前端·学习·webpack
excel20 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年21 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人21 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java1 天前
CSS网格布局
前端·css·html
阿昭L1 天前
html头部
html