Vue3 中使用 NPlayer

一、NPlayer 简介

NPlayer 是由 Typescript 加 Sass 编写，无任何第三方运行时依赖，兼容 IE11，支持移动端、支持 SSR、支持直播。高度可定制，所有图标、主题色等都可以替换，并且提供了内置组件方便二次开发。你可以自定义任意多个断点，不仅仅是兼容移动端，只要愿意，你可以非常轻松的兼容手机竖屏、手机横屏、平板等设备。它还拥有插件系统，弹幕功能就是使用插件形式提供，使用时按需引入即可。该播放器还可以接入任何流媒体，如 hls、dash 和 flv 等。

 官网文档：https://nplayer.js.org/docs/installation

 

二、安装

通过npm安装：

npm i -S nplayer @nplayer/vue

 

三、使用

在vue3中有两种使用的方式，一种是通过创建实例的方式使用，另一种是通过插件的方式的使用

1.创建实例来使用

<script setup>
import NPlayer from 'nplayer';

import { onMounted } from 'vue';

onMounted(() => {
//实例化一个播放器
 const  player = new NPlayer({         
//传入播放器的参数 
src:'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4',
  }) 

//将实例对象挂在到一个容器
player.mount(document.querySelector('.mv'))
}
</script> 

<template>
    <div class="mv"></div>
</template>

<style scoped>
  .mv,.mv {
    width: 600px;
    height: 300px;
  }
</style>

 初始化实例时可选的参数如下：

参数	描述
container	播放器挂载容器元素，同 mount 方法参数，如果 mount 没有传入参数时，将使用该参数，当该参数为字符串时，将会自动查找对应元素
src	视频地址，同 video 元素的 src 属性
video	自己提供 video 元素
videoProps	video 元素的属性
videoSources	video source 子元素数组，请查看 快速开始
live	是否是直播模式
autoSeekTime	视频加载成功时自动跳转到的时间点（跳转后该参数会自动设为 0），你可以用这个参数实现记忆上次用户观看时间
thumbnail	请查看 预览缩略图
controls	请查看 控制条
bpControls	设置不同断点下的控制条项布局，请查看 控制条
settings	请查看 设置菜单
contextMenus	请查看 右键菜单
contextMenuToggle	是否偶数次单击右键时显示浏览器默认右键菜单
plugins	插件列表，详情请查看 插件
i18n	当前播放器语言，如 en、zh
shortcut	是否开启快捷键功能
seekStep	单次快进、快退的步长，快捷键中会使用到
volumeStep	单次增加、降低音量的步长，快捷键中会使用到
themeColor	主题色，请查看 定制主题
posterBgColor	海报背景色，请查看 定制主题
progressBg	进度条背景，请查看 定制主题
progressDot	进度条上的点，请查看 定制主题
volumeProgressBg	音量条背景，请查看 定制主题
volumeBarLength	音量条长度，请查看 定制主题
volumeVertical	垂直音量条，请查看 定制主题
loadingEl	自定义视频 loading 元素，请查看 定制主题
openEdgeInIE	是否在 Win10 的 IE 中自动打开 Edge，请查看 IE 11 兼容
poster	海报图片地址，请查看 海报
posterEnable	是否启用海报功能
posterPlayEl	自定义海报播放按钮，请查看 定制主题

官网文档中有更详细的描述：https://nplayer.js.org/docs/api/config

使用属性 ：   全部属性：https://nplayer.js.org/docs/api/attrs

NPlayer 属性分为实例属性和静态属性。

实例属性可通过我们自己创建出来的实例直接访问，如访问播放器 DOM 元素 el  ：

//player是我们刚刚创建的实例
console.log(player.el);

而如果是静态属性比如：图标对象 Icon  ：我们需要通过 Player 这个对象去访问 ：

console.log(player.Player.Icon);

或者直接使用构造函数去访问：

import NPlayer from 'nplayer';

console.log(player.Player.Icon == NPlayer.Icon); //true

console.log(NPlayer.Icon)

 其他事件方法同理。

2.通过插件来使用

        首先在main.js中引入插件

import { createApp } from "vue";
import NPlayer from "@nplayer/vue";
import App from "./App.vue";

const app = createApp(App)

//使用插件
app.use(NPlayer)

app.mount("#app");

我们使用 use 方法应用插件，它可以接收一个参数，是组件的名称，默认组件名是 NPlayer

然后就可以在需要的组件中使用 <NPlayer/>：

<template>
  <div>
    <NPlayer
      :options="{ src: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4' }"
      :set="setPlayer"
    />
  </div>
</template>
<script setup>
import { onMounted } from "vue";

const setPlayer = (player) => {
     // 访问静态属性
     console.log(player.Player.Icon);
     // 访问实例属性
     console.log(player.el);
}
</script>

<style>

</style>

NPlayer 组件接收l两个参数分别是 options ,set 。

其中： options 为构造函数参数，这与我们创建实例对象时需要传入的参数相同,

             set  ：是一个函数，该函数的第一个参数为该播放器的的实例，与我们创建出来的实例一 样，所以访问属性，事件，方法也与相同。

其他配置可以到官网查看具体使用方法，打造属于自己的播放器 ：https://nplayer.js.org/docs/

官网提供的一个例子：https://nplayer.js.org/docs/examples/bilibili-theme