Vue framework usage

ZWPlayer provides dedicated interface packages for the Vue framework, supporting both Vue 2.x and Vue 3.x versions.

1. Vue 3.x

1.1 Installation Steps

1. 1. Install Vue Interface Package

You can install the zwplayer vue3.x interface package using the following command:

npm install zwplayervue3 --save

2. 2. Verify Installation

After successful installation, the zwplayer core library directory will be automatically generated under the project's public directory. This directory must be built and published along with the project.

1.2 Component Registration

Global Registration:

If you successfully created a vue3.x project, the vue-cli tool may have created a main.js file for you in the src directory. Add the following code to that file:

import ZwModule from 'zwplayervue3'

createApp(App)
  .use(ZwModule)
  .mount('#app')

The first line of the above code imports the zwplayer module and calls the vue3.x app's use method to globally install the zwplayer component. The global component names for zwplayer are zwplayer, zero-web-player, zero-player, and ZPlayer. Which name you choose as the tag name is up to your preference.

The globally registered zwplayer Vue component can be called in any child component of the project.

Local Registration:

Add the following code inside the <script></script> tag of any child component in your project:

import { zwplayer } from 'zwplayervue3'

export default {
  name: 'zwplayer-demo',
  components: {
    zwplayer   // Local registration of component
  },
  data() {
    return {
      movieUrl: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4',
      playerOpen: true
    };
  },
  props: {
    msg: String
  },
  methods: {
    onPlayerReady() {
      console.log('player ready event.');
    },
    onPlayerMediaEvent(event) {
      console.log('media event:', event.type);
    },
  sendDanmu: function(danmu) {
      console.log('sendDanmu:', danmu);
      // Call websocket or other methods to actually send the danmu
    }
  }
}

1.3 Component Usage

Example code for calling the zwplayervue3 component:

<template>
  <div class="hello">
    <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"
		danmuBar="danmu-controlbar"
	/>
  </div>
</template>

1.4 Modified Attributes

The attributes of the zwplayervue3 tag are mostly the same as the properties of the native zwplayer constructor parameter object, but zwplayervue3 has made modifications to a small number of attributes. The modified attributes are as follows:

The zwplayer Vue component provides the same methods as the native zwplayer. Please refer to the corresponding chapter. To call these methods, please obtain the reference through Vue's ref attribute in the parent component (for how to use ref to reference components, please refer to the Vue documentation).

1.5 Events

The zwplayervue3 component provides events such as onready and onmediaevent. Please see Event Documentation.

2. Vue 2.x

2.1 Installation Steps

1. 1. Install Vue Interface Package

You can install the zwplayer vue2.x interface package using the following command:

npm install zwplayer-vue2x --save

2. 2. Verify Installation

After successful installation, the zwplayer core library directory will be automatically generated under the project's public directory. This directory must be built and published along with the project.

2.2 Component Registration

import { zwplayer } from 'zwplayer-vue2x'

export default {
  components: {
    zwplayer
  }
}

2.3 Component Usage

The attributes, methods, and events of the Vue 2.x version are completely consistent with the Vue 3.x version. Please refer to the Vue 3.x usage instructions above.

3. Example Repositories

3.1 Vue 3.x Example

• Gitee: https://gitee.com/chenfanyu/zwplayervue3-demo

• GitHub: https://github.com/chenfanyu/zwplayervue3-demo

3.2 Vue 2.x Example

• Gitee: https://gitee.com/chenfanyu/zwplayer-vue2x-demo

• GitHub: https://github.com/chenfanyu/zwplayer-vue2x-demo

4. Notes

1. Directory Structure: Ensure the project has a public directory before installation

2. Core Library: The public/zwplayer directory must be published along with the project

3. Dynamic Loading: zwplayer uses a dynamic loading mechanism, supporting seamless upgrades

4. Method Calls: Call player methods through ref references