vue 使用西瓜播放器 直播

1、安装依赖

cnpm install xgplayer --save

cnpm install xgplayer-flv--save

cnpm install xgplayer-hls.js--save

2、引入依赖

 import HlsJsPlayer from "xgplayer-hls.js";
 import FlvPlayer from "xgplayer-flv";

3、使用

data（）{

         videoPlayer: null,

}

注意：IOS 不支持flv，如果遇到flv格式时，注意处理一下安卓支持flv和hls，hls链接格式是m3u8

西瓜播放器官方地址：西瓜播放器 | 快速上手

4.初始化播放器，有些需要的api在官方文档看

<div id="video-player" class="video-player"></div>

initPlayer() { //初始化
                var self = this
                if (self.liveVideoInfo.url_type == "flv") {//
                    self.videoPlayer = new FlvPlayer({
                        el: document.querySelector("#video-player"),
                        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                        //url: 'http://192.168.10.215:8080/live/livestream.m3u8',
                        url: self.liveVideoInfo.url,
                        width: "100%",
                        height: "100%",
                        volume: 0.6, // 初始音量
                        autoplay: true, // 自动播放
                        playsinline: true,
                        isLive: true,
                        cors: true,
                        //poster: 'https://www.nmgdjkj.com/file/cc8ec30e5527c03452f1d4c83b073e7f.png'
                    });
                    this.videoPlayer.on('waiting', () => { // 页面监听缓冲时间，如果存在则进行判断缓冲的时间是否大于3秒

                    })
                    this.videoPlayer.on('play', () => {
                        if( this.clickPlay ){
                            this.clickPlay = false
                            this.videoPlayer.destroy()
                            this.videoPlayer = null
                            // this.series = null
                            // this.gameId = null
                            // this.liveVideoInfo = null
                            // this.liveVideo = null
                            // this.race = []
                            // this.gameType = null
                            this.initPlayer()
                            // this.getDetail()
                        }else{
                            this.clickPlay = true
                        }
                    })
                    this.videoPlayer.on('canplay', () => { // 监听播放事件  缓冲如果结束了则对对象置空

                    })
                    this.videoPlayer.on('error', (error) => {
                        self.Toast({
                            type: 'html',
                            message: '<span>当前无直播</span>',
                            position: 'top',
                            duration: 3000,
                            className: 'cctoast',
                        });
                        // 视频流404的时候=>视频停止推流 进行监听错误的结束事件
                        if (this.videoPlayer.readyState == '没有关于音频/视频是否就绪的信息') {
                            //逻辑
                            //结束视频
                            // 一般可以使用一张图片进行代替视频demo
                        }
                    })
                } else {
                    self.videoPlayer = new HlsJsPlayer({
                        el: document.querySelector("#video-player"),
                        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                        url: self.liveVideoInfo.url,
                        // url: "http://192.168.10.215:8080/live/livestream.flv",
                        width: "100%",
                        height: "100%",
                        volume: 0.6, // 初始音量
                        autoplay: true, // 自动播放
                        playsinline: true,
                        isLive: true,
                        cors: true,
                        //poster: 'https://www.nmgdjkj.com/file/cc8ec30e5527c03452f1d4c83b073e7f.png'
                    });
                    this.videoPlayer.on('waiting', () => { // 页面监听缓冲时间，如果存在则进行判断缓冲的时间是否大于3秒
                        console.log(66666)
                    })
                    this.videoPlayer.on('canplay', () => { // 监听播放事件  缓冲如果结束了则对对象置空

                    })
                    this.videoPlayer.on('pause', () => {})
                    this.videoPlayer.on('play', () => {
                        if( this.clickPlay ){
                            this.clickPlay = false
                            this.videoPlayer.destroy()
                            this.videoPlayer = null
                            this.initPlayer()
                        }else{
                            this.clickPlay = true
                        }
                    })
                    this.videoPlayer.on('error', (error) => {
                        self.Toast({
                            type: 'html',
                            message: '<span>当前无直播</span>',
                            position: 'top',
                            duration: 3000,
                            className: 'cctoast',
                        });
                        // 视频流404的时候=>视频停止推流 进行监听错误的结束事件
                        if (this.videoPlayer.readyState == '没有关于音频/视频是否就绪的信息') {
                            //逻辑
                            //结束视频
                            // 一般可以使用一张图片进行代替视频demo
                        }
                    })
                }
            },

5、离开页面时，销毁播放器

beforeRouteLeave (to, from, next) {
         if(this.videoPlayer){
            this.videoPlayer.destroy()
            next()
         }else{
            next()
         }
        },