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

结果示例

相关推荐
web打印社区10 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗10 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长10 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅11 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_11 小时前
Chrome开发者工具
前端·chrome
YiHanXii11 小时前
this 输出题
前端·javascript·1024程序员节
楊无好12 小时前
React中ref
前端·react.js
程琬清君12 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪10012 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔6612 小时前
flutter实现web端实现效果
前端·flutter