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

结果示例

相关推荐
灵感__idea13 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript