vue项目中使用XgPlay.js播放视频

官网：西瓜播放器

1、首先安装下载 XgPlay.js依赖

npm i xgplayer --save

npm i xgplayer-hls.js --save

2、页面引用

import FlvPlayer from "xgplayer-flv.js";
import "xgplayer/dist/index.min.css";

3、建立dom容器

// 提供一个容器
<div id='xg></div>

4、初始化

initPlayer() {
            let _this = this;
            if (!this.url) return console.warn("url is not esist");
            const config = {
                id: this.id,
                url: this.url,
                fluid: true,

                //playsinline: true,
                isLive: true,
                cors: true,
                /**倍速播放 */
                playbackRate: [0.5, 0.75, 1, 1.5, 2],
                defaultPlaybackRate: 1,
                playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
                "x5-video-player-type": "h5", // 微信内置浏览器设置，防止被浏览器劫持
                "x5-video-orientation": "portraint",
                /**画中画 */
                pip: false,
                thumbnail: {
                    height: 25,
                },
                pipConfig: {
                    bottom: 0,
                    right: 0,
                    width: 320,
                    height: 80,
                },
                // download: true,
                /**初始化首帧 */
                videoInit: true,
                autoplay: true,
                autoplayMuted: true,
                screenShot: {
                    saveImg: true,
                    quality: 0.92,
                    type: "image/png",
                    format: ".png",
                },
                // 菜单控件
                controlPlugins: [],
            };
            //========================== 2，开始实例化======================
            const player = new FlvPlayer(config);

            if (player) {
                this.player = player;
                // this.player.getCssFullscreen()
                //
                // setTimeout(()=>{
                //   this.player.exitCssFullscreen()
                // },5000)
                /* 这里注册监听 */
                // this.player.once('complete', () => {
                //   console.log('complete')
                //   try {
                //     this.player.play() // 尝试再次执行播放
                //     setTimeout(() => { // 500毫秒收检测
                //       if (!this.player.hasStart && this.player.currentTime ===
                //           0) { // hasStart返回false，并且播放时间还是0，那么就可以认为自动播放失效了
                //
                //       }
                //     }, 500)
                //   } catch (e) {
                //     console.log(e);
                //   }
                // });
                // 监听视频开始播放 播放传给父组件的是true
                this.player.on("play", () => {
                    this.$emit("triggerEvent", true);
                });
                // 监听视频已经暂停 暂停传给父组件的是true
                this.player.on("pause", () => {
                    this.$emit("triggerEvent", false);
                });
                // 视频加载失败，报错误提示
                this.player.on("error", () => {
                    console.log("视频加载错误，请确认视频地址后再连接!");
                    //this.$message.warning('视频加载错误，请确认视频地址后再连接!');
                });
                // 监听 视频退出全屏
                // this.player.on('exitFullscreen', () => {
                //   window.scrollTo(0, 0);
                //   console.log('已经退出全屏了');
                // });

                //检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
                this.player.on("statistics_info", function (res) {
                    if (_this.lastDecodedFrame == 0) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        return;
                    }
                    if (_this.lastDecodedFrame != res.decodedFrames) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        _this.sameCount = 0;
                    } else {
                        _this.sameCount++;
                        console.log(
                            "decodedFrames没有发生变化第",
                            _this.sameCount,
                            "次。时间：",
                            new Date()
                        );

                        if (_this.sameCount > 9) {
                            //decodedFrames10秒不变，则判断为画面卡死，销毁实例进行重连
                            console.log(
                                "画面卡死，进行重连————————player:",
                                _this.player,
                                ".时间",
                                new Date()
                            );
                            //重置变量
                            _this.lastDecodedFrame = 0;
                            _this.sameCount = 0;

                            if (_this.player) {
                                _this.player.destroy(); //销毁
                                _this.getData(); //重连
                                console.log("重连完毕");
                            }
                        }
                    }
                });
            }
        },

5、视频效果

6、在Vue中使用封装组件

<template>
    <div style="position: relative; width: 100%; height: 100%">
        <div
            class="video-player"
            :id="id"
            className="video-player1"
            style="height: 100% !important; padding-top: 0 !important"
        ></div>
        <!--    <div style="position: absolute;bottom:0;right:0">放大</div>-->
    </div>
</template>
<script>
//import Player from 'xgplayer';

import FlvPlayer from "xgplayer-flv.js";
import "xgplayer/dist/index.min.css";
// import volume from "xgplayer/dist/controls/volume";
// import playbackRate from "xgplayer/dist/controls/playbackRate";
export default {
    props: {
        ......
    },
    data() {
        return {
            player: null, //实例
            lastDecodedFrame: 0, //最后一个decodedFrame
            sameCount: 0, //decodedFrame不变次数
        };
    },
    mounted() {
        console.log("传过来的url:", this.url);
        // 初始化播放器
        this.initPlayer();
    },
    created() {},
    // 监听播放路径的变化
    watch: {
        url: {
           ......
        },
    },
    methods: {
        // =========================1，设置播放器必要参数===================
        initPlayer() {
            let _this = this;
            if (!this.url) return console.warn("url is not esist");
            ......
               
                // 菜单控件
                controlPlugins: [],
            };
            //========================== 2，开始实例化======================
            const player = new FlvPlayer(config);

            if (player) {
                this.player = player;
                

                //检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
                this.player.on("statistics_info", function (res) {
                    if (_this.lastDecodedFrame == 0) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        return;
                    }
                    if (_this.lastDecodedFrame != res.decodedFrames) {
                        _this.lastDecodedFrame = res.decodedFrames;
                        _this.sameCount = 0;
                    } else {
                        _this.sameCount++;
                        console.log(
                            "decodedFrames没有发生变化第",
                            _this.sameCount,
                            "次。时间：",
                            new Date()
                        );

                        if (_this.sameCount > 9) {
                            //decodedFrames10秒不变，则判断为画面卡死，销毁实例进行重连
                            console.log(
                                "画面卡死，进行重连————————player:",
                                _this.player,
                                ".时间",
                                new Date()
                            );
                            //重置变量
                            _this.lastDecodedFrame = 0;
                            _this.sameCount = 0;

                            if (_this.player) {
                                _this.player.destroy(); //销毁
                                _this.getData(); //重连
                                console.log("重连完毕");
                            }
                        }
                    }
                });
            }
        },
        ......
    },
};
</script>

7、使用XgPlay.js组件

7.1 注册组件

import xgPlayVideo from '@/components/xgPlayVideo.vue'

7.2 使用组件

<xgPlayer :id="'XgPlayerDom'" :url="videoUrl"></xgPlayer>

提供测试地址：

//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4

资源共享：

https://download.csdn.net/download/u012967771/88769868https://download.csdn.net/download/u012967771/88769868