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 >