flv.js使用（vue）

flv.js使用前注意

flvjs只能播放HTTPFLV协议的的视频流

<template>

  <!-- <data-box title="重点区域视频联动" block> -->

    <!-- <div class="video-box"> -->

      <div class="video-list">

        <div 

          v-for="(video, idx) in videoList"

          :key="idx"

          class="video-item">

          <div class="video-con">

            <div class="video-info">

              <video 

                :id="video.index + '_' + idx"

                width="540" 

                height="300"

                autoplay 

                muted 

                >

                <!-- <source src="video/jpk-1.mp4" type="video/mp4"> -->

              </video>

            </div>

            <div class="video-name">{{video.camera_name}}</div>

          </div>

        </div>

      </div>

    <!-- </div> -->

  <!-- </data-box> -->

</template>

<script>

  import flvjs from 'flv.js'

  import { getData } from '@/assets/api/app'

  // let players = [];

  export default {

    name: 'video-list',

    props: {},

    data () {

      return {

        videoList: [

          // {

          //  camId: '99809b42-70a0-11e9-8592-fa163e4635ff',

          //  camName: '十候一检票口'

          // }

        ],

        players:[]

      }

    },

    computed: {},

    methods: {

      fetch () {

        getData('getCameraList_RTMP').then(data => {

          data = data.data;

          this.videoList = [

            ...data[0].camera_list,

            ...data[1].camera_list,

          ]

          console.log(this.videoList)

          this.$nextTick(()=>{

            this.videoList.forEach( (camInfo , idx) => {

              let videoEle = document.getElementById(`${camInfo.index}_${idx}`);

 

　　　　　　　　//！注意：如果播放直播流（监控视频）必须将参数isLive:true加上，不然会导致短时间内断流会造成视频页面卡顿

　　　　　　　　let player = flvjs.createPlayer({

                  type: 'flv',

                  url: camInfo.camera_url_flv,

                  isLive: true //直播流

              });

              player.attachMediaElement(videoEle);

              player.load();

              player.play();

              this.players.push(player);

            })

          })

        })

      }

    },

　　//调用组件

    created () {

      this.fetch()

    },

 

　　//在销毁生命周期内销毁组件

    destroyed () {

      this.players.forEach(player => {

        player.pause();

        player.unload();

        player.detachMediaElement();

        player.destroy();

        player = null;

      })

    }

  }

</script>

<template>

  <!-- <data-box title="重点区域视频联动" block> -->

    <!-- <div class="video-box"> -->

      <div class="video-list">

        <div 

          v-for="(video, idx) in videoList"

          :key="idx"

          class="video-item">

          <div class="video-con">

            <div class="video-info">

              <video 

                :id="video.index + '_' + idx"

                width="540" 

                height="300"

                autoplay 

                muted 

                >

                <!-- <source src="video/jpk-1.mp4" type="video/mp4"> -->

              </video>

            </div>

            <div class="video-name">{{video.camera_name}}</div>

          </div>

        </div>

      </div>

    <!-- </div> -->

  <!-- </data-box> -->

</template>