Skip to main content

Vue2 / Vue3

npm version gzip size Codacy Badge Test

如果你想在 Vue2 或 Vue3 项目中使用 NPlayer,可以使用 Vue 插件。

Installation#

npm i -S nplayer @nplayer/vue

You need to install nplayer and @nplayer/vue.

Or use via CDN.

<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>
<script src="https:/unpkg.com/@nplayer/vue/dist/index.min.js"></script>

Quickstart#

vue2#

import Vue from "vue";
import NPlayer from "@nplayer/vue";
import App from "./App.vue";
Vue.use(NPlayer);
new Vue({ render: (h) => h(App) }).$mount("#app");

Install the NPlayer plugin first.

<template>
<div>
<NPlayer
ref="player"
:options="{ src: 'https://v-cdn.zjol.com.cn/280443.mp4' }"
:set="setPlayer"
/>
</div>
</template>
<script>
export default {
methods: {
setPlayer(player) {
this.$options.player = player;
},
},
mounted() {
console.log(this.$refs.player.player === this.$options.player);
},
};
</script>

vue3#

import { createApp } from "vue";
import NPlayer from "@nplayer/vue";
import App from "./App.vue";
createApp(App).use(NPlayer).mount("#app");

Install the NPlayer plugin first.

<template>
<div>
<NPlayer
:options="{ src: 'https://v-cdn.zjol.com.cn/280443.mp4' }"
:set="setPlayer"
/>
</div>
</template>
<script>
import { onMounted } from "vue";
export default {
setup() {
let player = null;
onMounted(() => {
console.log(player);
});
return {
setPlayer: (p) => (player = p),
};
},
};
</script>

First we apply the plugin using use method to receive an argument, the name of the component.

Vue.use(NPlayer, { name: 'NPlayer' })

The default component name is NPlayer

NPlayer component receives a options prop.它是 NPlayer 构造函数参数,详情请查看 配置

NPlayer 内部把播放器包裹在一个 widthheight 都是 100% 的 div 中,你可以通过 classstyle prop,设置它的 css 类名和样式。

你还可以通过 set prop,来获取播放器实例,它是一个函数第一个参数就是播放器实例。(player: Player) => void

在线预览#

Vue2 DEMO: https://codesandbox.io/s/nplayer-vue2-demo-9lps9?file=/src/main.js

Vue3 DEMO: https://codesandbox.io/s/nplayer-vue3-demo-mt8s4?file=/src/main.js