前端vue+xgVIdeo集成rstp流播放

注意：rstp流需要对应的西瓜视频插件

项目：

petition-manager

代码概览：

1. video-player 子 组件

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

import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import "xgplayer/dist/index.min.css"
export default {
    props: {
        url: {
            // 父组件传过来的视频链接
            type: String,
            default: '',
        },
    },
    data() {
        return {
            player: null, //实例
        };
    },
    mounted() {
        console.log('传过来的url:', this.url);
        // 初始化播放器
        this.initPlayer();
    },
    created() { },
    // 监听播放路径的变化
    watch: {
        url: {
            handler(newValue, oldValue) {
                if (!this.player) {
                    this.initPlayer();
                    return;
                }
                this.player.src = this.url;
            },
        },
    },
    methods: {
        // =========================1，设置播放器必要参数===================
        initPlayer() {
            if (!this.url) return console.warn('url is not esist');
            const config = {
                id: 'video-player',
                url: this.url,
                // fluid: true,
              isLive: true,
              plugins: [FlvPlugin],
                /**倍速播放 */
                // 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: true,
                pipConfig: {
                    bottom: 100,
                    right: 100,
                    width: 320,
                    height: 180,
                },
                // download: true,
                /**初始化首帧 */
                // videoInit: true,
                // autoplay: true,
            };
            //========================== 2，开始实例化======================
            const player = new Player(config);

            if (player) {
                this.player = player;
                /* 这里注册监听 */
                // 监听视频开始播放 播放传给父组件的是true
                this.player.on('play', () => {
                    this.$emit('triggerEvent', true);
                });
                // 监听视频已经暂停 暂停传给父组件的是true
                this.player.on('pause', () => {
                    this.$emit('triggerEvent', false);
                });
                // 监听 视频退出全屏
                // this.player.on('exitFullscreen', () => {
                //   window.scrollTo(0, 0);
                //   console.log('已经退出全屏了');
                // });
            }
        },
        // IOS设备设置，防止被浏览器劫持
        isAppleDevice() {
            const ua = navigator.userAgent.toLowerCase();
            return /iphone|ipad|phone|Mac/i.test(ua);
        },
    },
};
</script>

<style></style>

2.父组件中引用：

<el-dialog :title="title" :visible.sync="openLive" width="700px" height="500px">
      <video-player-vue :url="url" @triggerEvent="triggerEvent">
      </video-player-vue>
    </el-dialog>

data 中需要加入 url 属性

方法中需要加入：

 clickLive() {
      this.openLive = true
      this.url = 'xxxxxxx'
    },

    // 监听到子组件传过来的播放状态 true是播放 false是暂停
    triggerEvent(value) {
      console.log("是否播放：", value);
    },

父组件样式:

<style lang="scss" scoped>
.videoPlayer {
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

</style>