3.7.1 调用zwplayervue3 步骤

zwplayer 提供了一个vue接口，通过vue接口开发的步骤如下：

1、创建vue项目

需要首先创建vue项目，必须时vue3.x项目。如果成功创建vue3.x项目，项目的根目录下应该存在 vue.config.js 文件。如果不存在这个文件，将不能正确安装zwplayervue3 包。

2、安装zwplayervue3 包

可以通过如下命令安装zwplayer的vue3.x接口包：

npm install zwplayervue3 --save

zwplayervue3 为zwplayer的vue接口包名，不能更改。

注意：如果成功安装zwplayervue3组件，则项目的public目录下会多出一个名为zwplayer的目录，为zwplayer的核心库目录，应该随build一起发布。

3、导入zwplayervue3 包

全局导入： 如果成功创建vue3.x项目，则vue-cli工具可能为你在src目录里创建了一个main.js文件，在该文件里添加如下代码：

import ZwModule from 'zwplayervue3'

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

以上代码第一行导入zwplayer模块，并调用 vue3.x 的app的use方法实现全局安装zwplayer组件，zwplayer的全局组件名为 zwplayer、zero-web-player、zero-player与ZPlayer等4个，具体选用哪个名字作为标签名，是随你的喜好。

全局注册的zwplayer vue组件可以在项目任何子组件里调用。

局部注册：

在项目的任何子组件里的标签内部添加如下代码：

import { zwplayer } from 'zwplayervue3'

export default {
  name: 'HelloWorld',
  components: {
    zwplayer   //局部注册组件
  },
  data() {
    return {
      movieUrl: 'http://192.168.1.202:8088/vod/mp4/Z112.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);
      // 调用websocket等方法将弹幕实际发送出去
    }
  }
}

4、调用

调用zwplayervue3组件的示例代码如下：

<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>