vue框架使用

ZWPlayer 提供了针对 Vue 框架的专用接口包，支持 Vue 2.x 和 Vue 3.x 版本。

1. Vue 3.x

1.1 安装步骤

1. 安装 Vue 接口包

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

npm install zwplayervue3 --save

2. 验证安装

安装成功后，项目的 public 目录下会自动生成 zwplayer 核心库目录，该目录必须随项目一起构建发布。

1.2 组件注册

全局注册：

如果成功创建 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: 'zwplayer-demo',
  components: {
    zwplayer   //局部注册组件
  },
  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);
      // 调用websocket等方法将弹幕实际发送出去
    }
  }
}

1.3 组件使用

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

1.4 变动属性

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 说明文档）获取引用。

1.5 事件

zwplayervue3 组件提供了 onready、onmediaevent等事件，请参见事件说明。

2. Vue 2.x

2.1 安装步骤

1. 安装 Vue 接口包

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

npm install zwplayer-vue2x --save

2. 验证安装

安装成功后，项目的 public 目录下会自动生成 zwplayer 核心库目录，该目录必须随项目一起构建发布。

2.2 组件注册

import { zwplayer } from 'zwplayer-vue2x'

export default {
  components: {
    zwplayer
  }
}

2.3 组件使用

Vue 2.x 版本的属性、方法和事件与 Vue 3.x 版本完全一致，请参考上述 Vue 3.x 的使用说明。

3. 示例仓库

3.1 Vue 3.x 示例

Gitee: https://gitee.com/chenfanyu/zwplayervue3-demo
GitHub: https://github.com/chenfanyu/zwplayervue3-demo

3.2 Vue 2.x 示例

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

4. 注意事项

目录结构: 安装前确保项目存在 public 目录
核心库: public/zwplayer 目录必须随项目一起发布
动态加载: zwplayer 采用动态加载机制，支持无缝升级
方法调用: 通过 ref 引用调用播放器方法

目录导航