源代码

<template>
<div class="advanceview">
	<!-- <h1 class="demo-title">{{ title }}</h1> -->
	<div id="main-player" class="playerWrapper">
		<zwplayer
			v-if="playerOpen"
			ref="zwplayerRef"
			nodeid="main-playerxxx"
			murl="rtsp://admin:3t3AiYHai@cam.peixunban.top:7550/Streaming/Channels/101"
			@onready="onPlayerReady"
			@onmediaevent="onPlayerMediaEvent"
			:snapshotButton="true"
			:optionButton="true"
			:infoButton="true"
      :fluid="true"
      :rtsp_over_tcp="true"
			:rtsp_bypass="false"
			:has_audio="false"
			:autoplay="true"
      xmc_url="wss://ai.mnbaba.com:8034/"
		/>
	</div>


</div>
</template>

<script>
import { zwplayer } from 'zwplayer-vue2x'



export default {
	name: 'vue-rtsp',
  computed: {

  },
	components: {
		'zwplayer': zwplayer
	},
	data() {
		return {
  		//movieUrl: live_url
	  	//movieUrl: '',
			playerOpen: true,
			title: 'zwplayer for vue2.x rtsp sample'
		}
	},
	props: {
		msg: String
	},
	methods: {
		onPlayerReady(player) { // eslint-disable-line no-unused-vars
			// player 为一个 ZWPlayer 实例
			console.log('player ready event.');
      //player.play('rtsp://admin:ab123456@meet.iavcast.com:8554/Streaming/Channels/101',true,false);
		},
		onPlayerMediaEvent(event, player) { // eslint-disable-line no-unused-vars
			console.log('media event:', event.type);
		},

	}
}
</script>

<style scoped>
.advanceview {
  /* width: 1026px; */
  /* height: 658px; */
  /* border: 1px solid #232323; */
  box-sizing: border-box;
  margin: 0 auto;
}

.demo-title {
  margin: 0px 0 0;
  height: 80px;
  padding: 10px;
  box-sizing: border-box;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  background-color: #f0f0f0;
}

.playerWrapper {
	width: 100%;
	/* height: 576px; */
	border: 0px solid #f00;
	position: relative;
	background-color: #111;
}



</style>