【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件

实验环境:

Python3.6.2

Django.1.9.12

-----------------------------------------------------------------------------------------

今天咱的Django智慧养殖系统又前进了一步。

这是完工后的效果图。

好了现在说说怎样使用Video.js插件

这是一个目前最好的开源Video视频插件

Video.js第三方下载地址：下载地址

-----------------------------

简单使用说明：

在html页面中引入CSS和JS文件

    <link rel="stylesheet" href="../static/assets/css/video-js.css">

    <script src="../static/assets/js/video.min.js"></script>    <script src="../static/assets/js/videojs-ie8.min.js"></script>

这里面的Src地址自己修改

然后就可以在html页面中添加自己的视频组件内容了

<div class="main"><!-- MAIN CONTENT -->        <div class="main-content">            <div class="container-fluid">                <h3 class="page-title">视频播放与控制页面测试</h3>            <div class="row">                <div class="col-md-9">                    <div class="panel">                        <div class="panel-heading">                            <h3 class="panel-title"><strong>刮粪板工作区监控</strong></h3>                        </div>                        <center>                        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"                              poster="http://video-js.zencoder.com/oceans-clip.png"                              data-setup="{}">                            <source src="../static/assets/mp4/testmp5.mp4" type='video/mp4' />                            <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->                            <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->                        </video>                        </center>                    </div>                </div>                <div class="col-md-3">                    <div class="row">                        <div class="panel">                            <div class="panel-heading">                                <h3 class="panel-title"><strong>刮粪板控制</strong></h3>                            </div>                        <div class="panel-body">                            <span style="font-size:18px;color:#000000"> 通信状态:  </span>                            <button type="button" class="am-btn am-btn-primary am-active">正在通信</button>                            <button type="button" class="am-btn am-btn-default am-active">未通信</button>                            <hr/>                            <span style="font-size:18px;color:#000000"> 设备状态:  </span>                            <button type="button" class="am-btn am-btn-primary am-active">正在运行</button>                            <button type="button" class="am-btn am-btn-default am-active">未运行</button>                             <hr/>                            <p style="font-size:18px;color:#000000">控制区域</p>                            <button type="button" class="am-btn am-btn-default am-round">清扫作业</button>                            <button type="button" class="am-btn am-btn-default am-round">动作暂停</button>                            <button type="button" class="am-btn am-btn-default am-round">设备归位</button>                        </div>                        </div>                    </div>                    <div class="row">                        <div class="panel">                            <div class="panel-heading">                                <h3 class="panel-title"><strong>设备作业统计</strong></h3>                            </div>                        <div class="panel-body">                            <h3 class="panel-title"><strong>总运行时间：</strong></h3>                            <hr/>                            <h3 class="panel-title"><strong>总运行次数：</strong></h3>                            <hr/>                            <h3 class="panel-title"><strong>上次作业时间：</strong></h3>                            <hr/>                            <h3 class="panel-title"><strong>平均作业时长：</strong></h3>                            <hr/>                            <h3 class="panel-title"><strong>今日作业次数：</strong></h3>                            <hr/>                            <div id="record01" style="width: 300px;height:100px;"></div>                            <script type="text/javascript">                            var record01 = echarts.init(document.getElementById('record01'));                            record01.title = '坐标轴刻度与标签对齐';                                option = {                                title: {                                    text: '运行次数展示'                                },                                tooltip: {                                    trigger: 'axis'                                },                                legend: {                                },                                grid: {                                    left: '3%',                                    right: '4%',                                    bottom: '3%',                                    containLabel: true                                },                                xAxis: {                                    type: 'category',                                    boundaryGap: false,                                    data: ['08-12','08-12','08-12','08-12','08-12','08-12','今天']                                },                                yAxis: {                                    type: 'value'                                },                                series: [                                    {                                        name:'运行次数',                                        type:'line',                                        stack: '总量',                                        data:[3, 2, 4, 6, 7, 4, 5]                                    },                                ]                            };                        record01.setOption(option);                            </script>                        </div>                        </div>                    </div>                </div>            </div>        </div>    </div>    </div>

这是我的页面的html内容代码

其中的Video的引用

核心代码：

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"                              poster="http://video-js.zencoder.com/oceans-clip.png"                              data-setup="{}">                            <source src="../static/assets/mp4/testmp5.mp4" type='video/mp4' />                            <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->                            <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --></video>