源代码

<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="movieUrl"
			@onready="onPlayerReady"
			@onmediaevent="onPlayerMediaEvent"
			:snapshotButton="true"
			:optionButton="true"
			:thumbnails="thumbnails"
			:sendDanmu="sendDanmu"
			:infoButton="true"
			:enableDanmu="true"
			:chapterButton="true"
             :fluid="true" 
			danmuBarId="danmu-controlbar"
		/>
	</div>
  	<div class="danmubar" id="danmu-controlbar">
		<!-- <div class="danmubar-left-fill">
			<button v-on:click="playerOpen = true">打开</button>
			<button v-on:click="playerOpen = false">销毁</button>
		</div> -->
	</div>  
	<div class="toolbar" id="main-controlbar">
		<button v-on:click="refTest">Ref 测试</button>
		<button v-on:click="playerPause">Pause</button>
		<button v-on:click="playerResume">Resume</button>
		<button v-on:click="playerSubtitles">Subtitles</button>
		<button v-on:click="playerRemoveSubtitles">Remove Subtitles</button>
		<button v-on:click="playerChapters">Chapters</button>
		<button v-on:click="playerRemoveChapters">Remove Chapters</button>
		<button v-on:click="playerPlayMovie2">Play Video 2</button>
		<button v-on:click="playerChangeUrl">Change Url</button>
		<button v-on:click="playerAppendDanmu">Append Danmu</button>
	</div>
</div>
</template>

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

var live_url = { // eslint-disable-line no-unused-vars
	murls: {
		"FULL_HD1": "http://pull-flv-f11.douyincdn.com/uploadfile/stream-691614469030412972.flv",
		"HD1": "http://pull-flv-f11.douyincdn.com/uploadfile/stream-691614469030412972_hd.flv",
		"SD1": "http://pull-flv-f11.douyincdn.com/uploadfile/stream-691614469030412972_ld.flv",
		"SD2": "http://pull-flv-f11.douyincdn.com/uploadfile/stream-691614469030412972_sd.flv"
	},
	multistream: 3
};

export default {
	name: 'vue-advance',
	components: {
		'zwplayer': zwplayer
	},
	data() {
		return {
		//movieUrl: live_url
			movieUrl: 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
			thumbnails: {
				"url": "http://demo.zwplayer.com:8088/images/VMAP8BwumT9ytBsi5DNnlRRkhkUkn5d36k5u50ZjkRFohxBjkwc67wg06R9j7B5l30c50Ms9kM8c0wlglwc12Mdjk0k6lME3k0o1l540rktsg5I3j5J2l0.jpg",
				"width": 128,
				"height": 72,
				"row": 10,
				"col": 11,
				"total": 110
			},
			playerOpen: true,
			title: 'zwplayer for vue2.x advance sample'
		}
	},
	props: {
		msg: String
	},
	methods: {
		onPlayerReady(player) { // eslint-disable-line no-unused-vars
			// player 为一个 ZWPlayer 实例
			console.log('player ready event.');
		},
		onPlayerMediaEvent(event, player) { // eslint-disable-line no-unused-vars
			console.log('media event:', event.type);
		},
		sendDanmu: function(danmu) {
			console.log('sendDanmu:', danmu);
			// 调用websocket等方法将弹幕实际发送出去
		},
		refTest(event) { // eslint-disable-line no-unused-vars
			let isNull = this.$refs.zwplayerRef ? 'exist' : 'none';
			let duration;

			if (this.$refs.zwplayerRef)
			duration = this.$refs.zwplayerRef.getDuration();

			console.log('zwplayer ref:', isNull, ' duration:', duration);
		},
		playerPause(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;
				player.pause();
			}
		},
		playerResume(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;
				player.resume();
			}
		},
		playerSubtitles(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;

				let subtitleURL_korean = 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_kore.srt';
				let subtitleURL_japan = 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_jpan.srt';

				player.addSubtitle(subtitleURL_korean, '1');

				player.addSubtitle(subtitleURL_japan, '2');
			}
		},
		playerRemoveSubtitles(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;
				player.removeSubtitle();
			}
		},
		playerChapters(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;
				player.setChapters('https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQ1mld3g5144ANrglNq.json?v=236');
			}
		},
		playerRemoveChapters(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;
				player.setChapters(null);
			}
		},
		playerPlayMovie2(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				let player = this.$refs.zwplayerRef;

				var thumbnails = {
					url: 'https://www.zwplayer.cn/uploadfile/test2/2d8c9bea1a50e5e578b18379200a614c_thumb.jpg',
          "width": 160,
          "height": 90,
          "row": 13,
          "col": 13,
          "total": 164
				};

				var vod_urls = {
					"type": "dvr",
					//"rtmp": "rtmp://192.168.1.202:1936/vod/VMAP9RwuREKpQbHqxbylRUOLTK7xSpSC6ZOvPomkHdqUzxC7Z8znKHrgCYtdogE33daqPoqbFJqVEdfAUtuaJJeSCUjHINNuh01.mp4",
					"http": "https://www.zwplayer.cn/uploadfile/test2/VMAP9RwuREKpQbHqxbylRUOLTK7xSpSC6ZOvPomkHdqUzxC7Z8znKHr.mp4",
					//"hls": "http://192.168.1.202:8088/vod/hls/VMAP9RwuREKpQbHqxbylRUOLTK7xSpSC6ZOvPomkHdqUzxC7Z8znKHrgCYtdogE33daqPoqbFJqVEdfAUtuaJJeSCUjHINNuh01/index.m3u8",
					//"dash": "http://192.168.1.202:8088/vod/dash/VMAP9RwuREKpQbHqxbylRUOLTK7xSpSC6ZOvPomkHdqUzxC7Z8znKHrgCYtdogE33daqPoqbFJqVEdfAUtuaJJeSCUjHINNuh01/manifest.mpd",
					thumbnails: thumbnails
				};

				player.play(vod_urls, false);
			}
		},
		playerChangeUrl(event) { // eslint-disable-line no-unused-vars
			var movieInfo = {
					"type": "dvr",
					//"rtmp": "rtmp://192.168.1.202:1936/vod/VMAP9RwunRN2n5cijmHnBVfsHum7JapK6BRj5M401Mc46Rs00g040NFohB5.mp4",
        "http": "https://www.zwplayer.cn/uploadfile/test3/VMAP15xJllF0hRAe5CR8h4hplNw7gSV7kkp2kzXkArbsHbxf3Q46.mp4",
					//"hls": "http://192.168.1.202:8088/vod/hls/VMAP9RwunRN2n5cijmHnBVfsHum7JapK6BRj5M401Mc46Rs00g040NFohB5/index.m3u8",
					//"dash": "http://192.168.1.202:8088/vod/dash/VMAP9RwunRN2n5cijmHnBVfsHum7JapK6BRj5M401Mc46Rs00g040NFohB5/manifest.mpd",
					"thumbnails" : {
						url: 'https://www.zwplayer.cn/uploadfile/test3/53d04f2cf72ee6ffc5c29174af673469_thumb.jpg',
          "width": 160,
          "height": 90,
          "row": 9,
          "col": 10,
          "total": 82
					}

				}
			// movieUrl 被绑定，如果movieUrl 发生变化，导致zwplayer加载这个url并播放
			this.movieUrl = movieInfo;
		},
		playerAppendDanmu(event) { // eslint-disable-line no-unused-vars
			if (this.$refs.zwplayerRef) {
				// 这仅仅是模拟，真实的弹幕应该是网络转发过来的
				let danmuText = '这是弹幕测试文本' + (new Date).toLocaleString();
				let player = this.$refs.zwplayerRef;

				var danmu = {
					text: danmuText
				};

				player.appendDanmu(danmu);
			}
		}
	}
}
</script>

<style scoped>
.advanceview {
  /* width: 1026px; */
 /* height: 708px; */
  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;
}

.danmubar {
	height: 50px;
	background-color: #232323;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
}

.danmubar .danmubar-left-fill {
	flex-grow: 1;
	align-items: center;
	justify-content: start;
	display: flex;
}

.danmubar .danmubar-left-fill button {
	background-color: #2b2b2b;
	border: 1px solid #474646;
	margin-right: 10px;
	height: 26px;
	min-width: 60px;
	border-radius: 5px;
	color: #ccc;
}

.danmubar .danmubar-left-fill button:hover {
	background-color: #4d4d4d;
	border-color: #7d7d7d;
	color: #f0f0f0;
}

.danmubar .danmubar-left-fill button:active {
	background-color: #252525;
	border-color: #414040;
	color: #cdcdcd;
}

.danmubar :deep(.zwp_danmu-controlbar) {
	width: 60%;
}

.toolbar {
     margin-top: 20px;
	padding: 6px;
	text-align: left;
	border: 1px solid #ccc;
}

.toolbar button {
	margin-right: 6px;
}
</style>