vue3

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组件可以在项目任何子组件里调用。

局部注册：

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

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>

5、变动属性

zwplayervue3 标签的属性与原生zwplayer 构造函数参数对象的属性大部分是一样，但zwplayervue3对其中的属性少部分做了变动，变动的属性如下：

属性名称	说明	备注
murl	媒体地址参数（可以是string、object、array类型），如果此属性在运行当中发生变动，则zwplayervue3组件会调用play方法打开这个新的地址。这在vue项目中，通过绑定v-bind 属性，可以做到动态切换播放节目。	作用改动
nodeid	用于zwplayervue3组件顶级父节点div的id，如果不提供，zwplayer组件会自动生成一个。	新增
zwplayerlib	zwplayer 库地址。不同于任何其它h5播放器，zwplayervue3 底层实现是采用动态加载原生zwplayer库的方式调用zwplayer的，不会随vue的build命令而将zwplayer底层库编译进项目的，这样可以做到vue项目编译发布后替换zwplayer库文件即可无缝升级zwplayer，同时也优化zwplayer的加载速度。此参数类似于cdn地址，例如加入你在公网部署了一台机器，将zwplayer.js 部署在 http://www.cdn.com/zwplayer/zwplayer.js 处，此参数设置为该地址即可。此参数可以缺省，缺省时用的时 public目录下的zwplayer/zwplayer.js路径。	新增
danmuBarId	用于定位 zwplayer 弹幕输入控制条的div元素的id，提供此参数，可以避免调用 buildDanmuControlbar函数来创建弹幕控制条。注意新建的控制条将具有 class 名 vue-zwp-danmubar，用户可以用该class名进一步控制弹幕控制条的风格。例如下面的css将控制条宽度设置为60%： .danmubar :deep(.vue-zwp-danmubar) { width: 60%;} 注意：如果在<style scoped>定义css，请用vue的:deep指令来进行样式穿透。	新增
其它	请参见 zwplayer播放器构造函数的参数的说明，具体需要提供什么属性请根据你的项目而定。

zwplayer 的vue组件提供了与原生zwplayer一样的方法，请参考相应章节。要调用这些方法，请在父组件里通过 vue的ref 属性（具体如何使用ref引用组件请参考vue说明文档）获取引用。