代码svn地址 （用户名：liu，密码;123）

这一篇来说视频，使用的是基于 Alipayer封装的组件vue-alipayer-v2，地址

效果图：

现在是直播模式，应该是可以播放监控摄像头的，但我没有能用的监控摄像头IP。

还记得我们之前的模拟实时数据监测图层吗？

这里有个在线视频，之前是放上个视频播放，现在来改一下。

1，首先运行命令安装vue-aliplayer-v2组件

npm install vue-aliplayer-v2

2,将下面的文件解压缩后放到src文件夹里

链接：https://pan.baidu.com/s/1Z1Xk0kN-_SYjsAPduv4rqg
提取码：31w9
3，在views文件夹里新建AliPlayer.vue文件

<template>
  <div id="app">
    <template v-if="!isShowMultiple && show">
      <vue-aliplayer-v2 :source="source"
                        ref="VueAliplayerV2"
                        :options="options" />
    </template>
    <div v-if="isShowMultiple && show"
         class="show-multiple">
      <template v-for="x in 5">
        <vue-aliplayer-v2 class="multiple-player"
                          :key="x"
                          :source="source"
                          ref="VueAliplayerV2"
                          :options="options" />
      </template>
    </div>
    <!-- <p class="remove-text"
       v-if="!show">播放器已销毁!</p>
       <div class="player-btns"> -->
    <div style="text-align:center;margin-top:10px;height:50px">
      <el-button type="text"
                 icon="el-icon-play"
                 size="medium"
                 @click="play()"
                 style="height: 30px;width: 80px;">播放</el-button>
      <el-button type="text"
                 icon="el-icon-pause"
                 size="medium"
                 @click="pause()"
                 style="height: 30px;width: 80px;">暂停</el-button>
      <el-button type="text"
                 icon="el-icon-replay"
                 size="medium"
                 @click="replay()"
                 style="height: 30px;width: 80px;">重播</el-button>
    </div>
    <!-- </div>  -->
    <!-- <div class="player-btns">
      <template v-if="!isShowMultiple && show">
        <span @click="play()">播放</span>
        <span @click="pause()">暂停</span>
        <span @click="replay()">重播</span>
        <span @click="getCurrentTime()">播放时刻</span>
        <span @click="getStatus()">获取播放器状态</span>
      </template>
      <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
      <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
      <span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span>
    </div>  -->
    <!-- <div class="source-box">
            <span class="source-label">选择播放源(支持动态切换):</span>
            <select v-model="source" name="source" id="source">
                <option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
                <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
                <option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
                <option value="//ivi.bupt.edu.cn/hls/cctv1hd.m3u8">直播播放源4</option>
            </select>
        </div>
        <div class="source-box">
            <span class="source-label">输入播放源(支持动态切换):</span>
            <input class="source-input" type="text" v-model="source">
        </div> -->
  </div>
</template>
<link rel="stylesheet" href="../aliPlayer/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="../aliPlayer/aliplayer-min.js"></script>
<script>
    import VueAliplayerV2 from 'vue-aliplayer-v2';
    export default {
        name: 'Live-Demo',
        components:{ VueAliplayerV2: VueAliplayerV2.Player },
        data(){
            return {
                options: {
                    // source:'//player.alicdn.com/video/aliyunmedia.mp4',
                    isLive: true,   //切换为直播流的时候必填（true-直播状态，false-普通模式，播放器普通视频）
                },
                source: null, //'//player.alicdn.com/video/aliyunmedia.mp4'
                show: true,
                isShowMultiple: false
            }
        },
        props: ["data"],
        created () {
          //this.source=this.data.IP+":"+this.data.PORT    //在线监控的IP加端口号
          this.source="//player.alicdn.com/video/aliyunmedia.mp4"  //模拟在线监控的固定视频
        },
        methods:{
            play(){
                this.$refs.VueAliplayerV2.play()
            },
            pause(){
                this.$refs.VueAliplayerV2.pause();
            },
            replay(){
                this.$refs.VueAliplayerV2.replay();
            },
            getCurrentTime(){
                // this.$refs.VueAliplayerV2.getCurrentTime();
                this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
            },
            getStatus(){
                const status =  this.$refs.VueAliplayerV2.getStatus();
                console.log(`getStatus:`, status);
                alert(`getStatus:${status}`);
            },
            showMultiple(){
                this.isShowMultiple = !this.isShowMultiple;
            }
        }
    }
</script>
<style lang="less"  scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .remove-text{
        text-align: center;
        padding: 20px;
        font-size: 24px;
    }
    .show-multiple{
        display: flex;
    .multiple-player{
        width: calc(80% / 4);
        margin: 20px;
    }
    }
    .player-btns{
        width: 80%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    span {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 150px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 5px;
        cursor: pointer;
    }
    }
    .source-box{
        padding: 5px 10px;
        margin-bottom: 20px;
    .source-label{
        margin-right: 20px;
        font-size: 16px;
        display: block;
    }
    #source{
        margin-top: 10px;
    }
    .source-input{
        margin-top: 10px;
        padding: 5px 10px;
        width: 80%;
        border: 1px solid #ccc;
    }
    }
</style>

4，然后在DataMonitor.vue里引用，分三步

import aliPlayer from './AliPlayer.vue'

 components: { PieChart, aliPlayer },

 <el-tab-pane label="在线视频">
        <div style="width:460px;height:375px">
          <aliPlayer ref="video"></aliPlayer>
        </div>
      </el-tab-pane>

此时此刻，DataMonitor.vue完整代码：

<!-- 数据监测 -->
<template>
  <section>
    <el-tabs type="border-card">
      <el-tab-pane label="数据监测实时曲线">
        <!-- 图表 -->
        <div ref="chart"
             style="width:460px;height:375px;">
          <PieChart ref="echarts"></PieChart>
        </div>
      </el-tab-pane>
      <el-tab-pane label="在线视频">
        <div style="width:460px;height:375px">
          <aliPlayer ref="video"></aliPlayer>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
import PieChart from "./MonitorChart.vue"; //引入自定义Echart饼图组件
import aliPlayer from './AliPlayer.vue'
export default {
  components: { PieChart, aliPlayer },
  data () {
    return {
      pieChart: {
        radius: '25%',
        pieData: [],
        pieDataName: [],

      },
      form: {}
    }
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layerid: {
      type: String,
      default: ""
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
  },
  mounted () {
    //传递来的数据
    this.form = this.info;
    //把你所需要数据赋值给data中的pieChart对象，然后获取对象中的键值
    var { radius, pieData, pieDataName } = this.pieChart;
    pieData = this.form.data;
    pieDataName = this.form.data.NAME;
    //数据渲染图表
    this.$refs.echarts.initChart(radius, pieData, pieDataName)
  }
}

</script>

<style scoped>
.el-range-editor--mini.el-input__inner {
  height: 28px;

  left: 20px;
  top: 30px;
}
</style>

5，别忘了播放按钮的图标，这是自定义的，把下面三张图片，放到assets文件夹的images文件夹里

然后在blue.css里加上下面的代码

/*自定义按钮*/
.el-icon-play{
  background: url(../assets/images/播放.png) center no-repeat;
  background-size: cover;
}
.el-icon-pause{
  background: url(../assets/images/暂停.png) center no-repeat;
  background-size: cover;
}
.el-icon-replay{
  background: url(../assets/images/重播.png) center no-repeat;
  background-size: cover;
}

.el-icon-play:before,.el-icon-pause:before,.el-icon-replay:before{
  content: "替";
  visibility: hidden;
}

好，可以了；系统又完善了一点，下一篇再见！