国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

實(shí)驗(yàn)環(huán)境:

Python3.6.2

Django.1.9.12

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

今天咱的Django智慧養(yǎng)殖系統(tǒng)又前進(jìn)了一步。

這是完工后的效果圖。

好了現(xiàn)在說說怎樣使用Video.js插件

這是一個(gè)目前最好的開源Video視頻插件

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

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

簡(jiǎn)單使用說明：

在html頁(yè)面中引入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>

然后就可以在html頁(yè)面中添加自己的視頻組件內(nèi)容了

<div class="main">
			<!-- MAIN CONTENT -->
        <div class="main-content">
            <div class="container-fluid">
                <h3 class="page-title">視頻播放與控制頁(yè)面測(cè)試</h3>
            <div class="row">
                <div class="col-md-9">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title"><strong>刮糞板工作區(qū)監(jiān)控</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"> 通信狀態(tài):  </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"> 設(shè)備狀態(tài):  </span>
                            <button type="button" class="am-btn am-btn-primary am-active">正在運(yùn)行</button>
                            <button type="button" class="am-btn am-btn-default am-active">未運(yùn)行</button>
                             <hr/>
                            <p style="font-size:18px;color:#000000">控制區(qū)域</p>
                            <button type="button" class="am-btn am-btn-default am-round">清掃作業(yè)</button>
                            <button type="button" class="am-btn am-btn-default am-round">動(dòng)作暫停</button>
                            <button type="button" class="am-btn am-btn-default am-round">設(shè)備歸位</button>
                        </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title"><strong>設(shè)備作業(yè)統(tǒng)計(jì)</strong></h3>
                            </div>
                        <div class="panel-body">
                            <h3 class="panel-title"><strong>總運(yùn)行時(shí)間：</strong></h3>
                            <hr/>
                            <h3 class="panel-title"><strong>總運(yùn)行次數(shù)：</strong></h3>
                            <hr/>
                            <h3 class="panel-title"><strong>上次作業(yè)時(shí)間：</strong></h3>
                            <hr/>
                            <h3 class="panel-title"><strong>平均作業(yè)時(shí)長(zhǎng)：</strong></h3>
                            <hr/>
                            <h3 class="panel-title"><strong>今日作業(yè)次數(shù)：</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 = '坐標(biāo)軸刻度與標(biāo)簽對(duì)齊';
                                option = {
                                title: {
                                    text: '運(yùn)行次數(shù)展示'
                                },
                                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:'運(yùn)行次數(shù)',
                                        type:'line',
                                        stack: '總量',
                                        data:[3, 2, 4, 6, 7, 4, 5]
                                    },
                                ]
                            };
                        record01.setOption(option);
                            </script>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

其中的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>