【Django Admin】后台首页视频实现FLV推流，模板返回JS变量需要加引号 

1：继承后台首页的模板，找到需要修改的部分。    文件位置：   templates/admin/home.html

 {% block 你的继承负名 %}
 　　<el-card style="margin-top: 10px;">
　　　　　　<iframe style="width: 100%;height: 410px;" id="frame_id"  src="/href/video/"></iframe> # 嵌套iframe来跳转播放FLV推流
     </el-card>
 {% endblock %}

 

2： 编写跳转URL，使ifame通过URL跳转到FLV的推流HTML模板。  文件位置： api/hre_open_video.py

from django.shortcuts import render
def open_video(request):
    return render(request, "admin/open_video.html") # 推流视频HTML模板

 

3：url.py 路由的配置. 文件位置：  urls.py

# 跳转IFAME
 path(r'href/video/', href_open_video.open_video),

 

4: 编写推流HTML，这里为了使ifame在原页面有响应式的效果，所以使用了监听浏览器页面进行局部刷新
文件位置:  templates/admin/open_video.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <div id="player" style="width: 100%"></div>

</body>
</html>

<script src="/static/flv/xgplayer.js" charset="utf-8"></script>
<script  src="/static/flv/xgplayer-flv.js"  charset="utf-8"></script>
# 下载地址：https://files.cnblogs.com/files/wanghong1994/flv.zip

<script type="text/javascript">
　　# 监听响应式 并且刷新
    window.addEventListener("resize", () => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
        location.reload();

    });

    # 创建FLV西瓜播放器
　　 # 西瓜播放器插件文档：https://v2.h5player.bytedance.com/plugins/#xgplayer-hls-js
    new window.FlvJsPlayer({
        id: 'player',
        isLive: false,
        playsinline: true,
        url: "{{ LIVE }}", # 接口返回直播链接，在这里需要加上引号，不然渲染的时候不是字符串
        autoplay: true,
        height: 368,
        width: window.innerWidth - 10,
    });
</script>

 

posted @ 2022-07-26 20:29  PythonNew_Mr.Wang  Views(275)  Comments(0)    收藏  举报