注意：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;/* 这里注册监听 */// 监听视频开始播放 播放传给父组件的是truethis.player.on('play', () => {this.$emit('triggerEvent', true);});// 监听视频已经暂停 暂停传给父组件的是truethis.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 = truethis.url = 'xxxxxxx'},// 监听到子组件传过来的播放状态 true是播放 false是暂停triggerEvent(value) {console.log("是否播放：", value);},

父组件样式:

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