【vue】video结合cyberplayer.js实现flv视频播放

一、原理

H5新增的<video>标签可以用于视频播放，但格式有限，播放不了直播生成的.flv视频。

那么可以结合cyberplayer.js来实现.flv视频播放，简单粗暴。原理如下：

① 下载该库，并在index.html中引入

<script type='text/javascript' src="./static/js/cyberplayer-3.4.1/cyberplayer.js"></script>

② 在组件模板中使用<video>通过id占位。

<video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay>
</video>

③在js中实现视频播放

var player = cyberplayer("myPlayer").setup({
            width : 788,
            height : 546,
            backcolor : "#FFFFFF",
            stretching : "fill",
            file : this.videoAdress,  //视频url，这里是调用接口返回的
            ak : "88abcbd72fbc4b809dfe9e5bc97ad759",
            autoStart : true,
            repeat : false,
            volume : 100, 
            controls : true,
            controlbar: {
                barLogo: false
            }
});

二、 项目中应用

我是在vue项目中使用的，将视频播放封装成组件，注意传给子组件的播放地址值是动态的，所以在子组件中需要通过watch进行监听；此外，视频播放结束后需要在beforeDestroy()中清除，否则会存在视频关闭而声音犹存的状况。

父组件：

<el-dialog title="视频回放" :visible.sync="editVisible" >
    <Vplay :item="videoAdress"></Vplay>
</el-dialog>

import Vplay from './history-play'
export default{
    components:{
      Vplay,
    },
    created(){ 
      this.getData();
    },
    method:{
      lookVideo(index, row) {
        axios({
          url:"...",
        }).then(res=>{
          this.videoAdress = res.data.data.RtmpServer;
        }).catch(error=>{
          console.log(error)
        });

      },
    }
}

子组件：

<video id="myPlayer"  poster="" controls playsInline webkit-playsinline autoplay>
</video>

export default {
    props:["item"],
    data() {
      return {
        player: Function,
        cItem:'',
      };
    },
    watch:{
        item:function(newVal,oldVal){
            this.cItem = newVal;  //newVal即是item
            this.playVideo()   
        }
    },
    beforeDestroy(){
        this.player.remove();
    },
    // 实例销毁后移除所有的监听器，解绑全部指令及监视器,防止音频犹存
	destroyed() {
	    this.$off();
	    this.$destroy();
	},
    methods:{
        playVideo(){
            this.player = cyberplayer("myPlayer").setup({
                width : 635, 
                height : 410,  
                backcolor : "#FFFFFF",
                stretching : "fill",
                file : this.cItem,
                ak : "88abcbd72fbc4b809dfe9e5bc97ad759",
                autoStart : true,
                repeat : false,
                volume : 100, 
                controls : true,
                controlbar: {
                barLogo: false
                }
            });
        }
    }
}