源代码

<template>
	<div class="native-root">
		<div class="native-js-view" id="mse">
		</div>
		<!-- <div>
			<button @click="onCurrentTime">Current Time</button>
			<span class="time-view">{{ currentTime }}</span>
		</div> -->
	</div>
</template>

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

	export default {
		name: 'vue-native',
		data () {
			return {
				zwplayer: null,
				currentTime: ''
			}
		},

		methods: {
			onCurrentTime() {
				var vm = this;

				if (vm.zwplayer) {
					vm.currentTime = vm.zwplayer.CurrentTime;
				}
			}
		},

		created() {
			console.log('NativeJS Created: ');
		},

		mounted() {
			console.log('NativeJS mounted: ');

			this.zwplayer = new Player({
					playerElm: document.querySelector('#mse'),
					url: 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
					fluid: true,
					optionButton: true,
                    logo: {
                      icon: 'http://doc.zwplayer.cn/logo.png',
                     dock: 'right',
                     opacity: '70',
                     //x: '10%',
                     y: '2%',
                     width: '15%'
                    }
				});
		},

		destroyed() { // for vue3.x: unmounted
			let vm = this;
			console.log('NativeJS unmounted');
			if (vm.zwplayer) {
				vm.zwplayer.destroy();
				delete vm.zwplayer;
			}
		}
	};

</script>

<style>

.native-js-view {
	/* width: 1024px; */
	height: 576px;
}

.time-view{
	display: inline-block;
	padding: 2px 6px;
}

</style>