zwplayer-vue2x 1.0.30 → 1.0.32

package/sources/vueplayer/src/main.vue

@@ -0,0 +1,393 @@
+<!-- zwplayer for vue -->
+<script>
+// import { h } from 'vue'
+import { zwplayer_loadjs } from "./loadjs.js";
+
+const zwplayer_js_def = 'zwplayer/zwplayer.js?v=3.6';
+
+const availabe_props = {
+	isLive:  'boolean',
+	useOldFlv: 'boolean',
+	useFlv: 'boolean',
+	streamtype: 'string',
+	hasAudio: 'boolean',
+	hasVideo: 'boolean',
+	xmc_url: 'string',
+	fixedControlbar: 'boolean',
+	nativecontrols: 'boolean',
+	infoButton: 'boolean',
+	speedButton: 'boolean',
+	optionButton: 'boolean',
+	snapshotButton: 'boolean',
+	chapterButton: 'boolean',
+	enableDanmu: 'boolean',
+	useProgressTooltip: 'boolean',
+	hidePlayBtn: 'boolean',
+	disablePlayBtn: 'boolean',
+	disableSeek: 'boolean',
+	disableFullscreenWin: 'boolean',
+	disablePicInPic: 'boolean',
+	disableVolumeControl: 'boolean',
+	lostFocusPause: 'boolean',
+	autoSmallWindow: 'boolean',
+	localPlayback: 'boolean',
+	recordButton: 'boolean',
+	segmentButton: 'boolean',
+	disableMutedConfirm: 'boolean',
+	keepAudioWindow: 'boolean',
+	lang: 'string',
+	thumbnails: 'object',
+	sendDanmu: 'function',
+	danmuBarId: 'string',
+	fluid: 'boolean',
+	poster: 'string',
+	logo: 'object|string',
+	ratio: 'string|number',
+	width: 'string|number',
+	height: 'string|number'
+};
+
+export default {
+	name: 'ZwPlayer',
+	data () {
+		return {
+			zwplayer: null,
+			nodename: 'ZwPlayer'
+		}
+	},
+	props: {
+		zwplayerlib: String,
+		murl: String,
+		nodeid: String,
+		muted: Boolean,
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		videoprop: Object,
+		videostyle: String,
+		reconnect: {
+			type: Boolean,
+			default: true
+		},
+		controlbar: {
+			type: Boolean,
+			default: true
+		},
+		useProgressTooltip: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	emits: ['oneterror', 'onmediaevent', 'onready', 'onFileSelected', 'onFileLoaded'],
+	methods: {
+		play(url, isLive, useOldFlv) {
+			let vm = this;
+
+			if (!url)
+				url = this.murl;
+			if (!vm.zwplayer)
+				return;
+
+			vm.zwplayer.play(url, isLive, useOldFlv);
+		},
+		stop() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.stop();
+			}
+		},
+		pause() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.pause();
+			}
+		},
+		resume() {
+			let vm = this;
+			if (vm.zwplayer) {
+				vm.zwplayer.resume();
+			}
+		},
+		getDuration() {
+			let vm = this;
+			if (vm.zwplayer) {
+				return vm.zwplayer.getDuration();
+			}
+			return undefined;
+		},
+
+		getCurrentTime() {
+			let vm = this;
+			if (vm.zwplayer) {
+				return vm.zwplayer.CurrentTime;
+			}
+			return undefined;
+		},
+
+		seekTime(time) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.seekTime(time);
+			}
+		},
+		destroy() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.destroy();
+			}
+		},
+		setplaystate(bPlaying) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.setplaystate(bPlaying);
+			}
+		},
+
+		setEnableDanmu(bEnable) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.setEnableDanmu(bEnable);
+			}
+		},
+
+		appendDanmu(msgObj, setting) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.appendDanmu(msgObj, setting);
+			}
+		},
+
+		setChapters(chapters) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.setChapters(chapters);
+			}
+		},
+
+		addSubtitle(subtitleUrl, pos, title) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.addSubtitle(subtitleUrl, pos, title);
+			}
+		},
+
+		removeSubtitle() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.removeSubtitle();
+			}
+		},
+
+		buildDanmuControlbar(parentId, className) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.buildDanmuControlbar(parentId, className);
+			}
+		},
+
+		notifyResize(width, height) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.notifyResize(width, height);
+			}
+		},
+
+		setMute(bMute) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.setMuted(bMute);
+			}
+		},
+
+		setullscr(bFullScr) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.is_fullscr = bFullScr;
+				vm.zwplayer.setFullscreen(bFullScr);
+			}
+		},
+	},
+
+	computed: {
+		CurrentTime: function() {
+			let vm = this;
+			if (vm.zwplayer) {
+				return vm.zwplayer.CurrentTime;
+			}
+			return -1;
+		}
+	},
+
+	render(createElement) {
+		let playerid;
+
+		// console.log('render');
+		if (this.nodeid) {
+			playerid = this.nodeid;
+		}
+		else {
+			let now = (new Date()).getTime();
+
+			if (!window.nextZWPlayerId) {
+				window.nextZWPlayerId = 1000;
+			}
+			else {
+				window.nextZWPlayerId++;
+			}
+			playerid = 'zwplayer-'+ window.nextZWPlayerId + '-' + now;
+		}
+
+		let playerWrap = createElement('div', {
+			class: {'zwplayer-vue': true},
+			attrs: {
+				id: playerid,
+			},
+		}, []);
+
+		if (playerWrap) {
+			let vm = this;
+			vm.playerid = playerid;
+		}
+
+		if (this.zwplayer && this.murl !== this.old_murl) {
+			this.zwplayer.play(this.murl); // change movie url
+			this.old_murl = this.murl;
+		}
+
+		return playerWrap;
+	},
+
+	mounted() {
+		let vm = this;
+		//console.log('mounted main');
+		let zwplayer_js;
+
+		if (vm.zwplayerlib)
+			zwplayer_js = vm.zwplayerlib;
+		else
+			zwplayer_js = zwplayer_js_def;
+
+		vm.rootElm = document.getElementById(vm.playerid);
+		if (vm.rootElm) {
+			vm.rootElm.style.width = '100%';
+			vm.rootElm.style.height = '100%';
+			vm.rootElm.style.margin = '0';
+			vm.rootElm.style.padding = '0';
+		}
+
+		zwplayer_loadjs('zwplayer-core', zwplayer_js, function(jsid) {
+			let url = '';
+
+			if (!jsid) {
+				//console.log('zwplayer_loadjs failed!');
+			}
+
+			if (vm.murl)
+				url = vm.murl;
+			else if (vm.videoprop && typeof vm.videoprop.url !== 'undefined')
+				url = vm.videoprop.url;
+			let videostyle = "width:100%;height:100%;";
+			if (vm.videoprop && typeof vm.videoprop.videostyle !== 'undefined')
+				videostyle = vm.videoprop.videostyle;
+
+			let params = {
+				url: url,
+				playerElm: vm.rootElm,
+				videostyle: videostyle,
+				reconnect: vm.reconnect,
+				autoplay: vm.autoplay,
+				muted: vm.muted,
+				controlbar: vm.controlbar,
+				useProgressTooltip: vm.useProgressTooltip,
+				onready: function() {
+					vm.$emit('onready', this);
+				},
+				onnetclose: function() {
+					vm.$emit('onnetclose', this);
+					return true;
+				},
+				onFileSelected: function(event) {
+					vm.$emit('onFileSelected', event, this);
+				},
+
+				onFileLoaded: function(event) {
+					vm.$emit('onFileLoaded', event, this);
+				},
+				onneterror: function() {
+					vm.$emit('onneterror', this);
+				},
+				onmediaevent: function(event) {
+					vm.$emit('onmediaevent', event, this);
+				}
+			};
+
+			let props_list = availabe_props;
+
+			const isTypeOf = function(type, types) {
+				if (types.indexOf('|') > 0) {
+					var typeList = types.split('|');
+					for(let i = 0; i < typeList.length; i++) {
+						if (type === typeList[i])
+							return true;
+					}
+					return false;
+				}
+
+				return type === types;
+			}
+
+			for (let prop in vm.$attrs) {
+				var propType = typeof vm.$attrs[prop];
+				if (prop in props_list && isTypeOf(propType, props_list[prop])) {
+					if (propType === 'object')
+						params[prop] = JSON.parse(JSON.stringify(vm.$attrs[prop])); // copy property
+					else
+						params[prop] = vm.$attrs[prop];
+				}
+			}
+     //console.log(params)
+			vm.zwplayer = new window.ZWPlayer(params);
+
+			if(params.danmuBarId) {
+				vm.zwplayer.buildDanmuControlbar(params.danmuBarId, 'vue-zwp-danmubar');
+			}
+
+			vm.old_murl = url;
+		})
+	},
+
+	beforeDestroy() { // vue3.x beforeUnmount
+		let vm = this;
+		// console.log('beforeUnmount');
+		if (vm.zwplayer) {
+			vm.zwplayer.stop();
+		}
+	},
+
+	destroyed() { // vue3.x unmounted
+		let vm = this;
+		// console.log('unmounted');
+		if (vm.zwplayer) {
+			vm.zwplayer.destroy();
+			delete vm.zwplayer;
+		}
+	}
+}
+</script>
+