zwplayer for vue2.x rtsp sample

<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:ab123456@meet.iavcast.com:8554/Streaming/Channels/101"
      :autoplay="true"
			@onready="onPlayerReady"
			@onmediaevent="onPlayerMediaEvent"
			:snapshotButton="true"
			:optionButton="true"
			:infoButton="true"
      xmc_url="http://ai.mnbaba.com:8138/"
		/>
	</div>


</div>
</template>

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



export default {
	name: 'DemoRTSP',
  computed: {

  },
	components: {
		'zwplayer': zwplayer
	},
	data() {
		return {
		//movieUrl: live_url
			movieUrl: 'rtsp://admin:ab123456@meet.iavcast.com:8554/Streaming/Channels/101',
			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>