admin 管理员组

文章数量: 1184232

目录

介绍

一、基础使用

二、播放器配置

三、实现弹幕功能

四、总结

介绍

NPlayer是一款功能强大、响应式、可定制的播放器，基于TypeScript和Sass编写。NPlayer支持高定制，你可以轻松定制图标、主题颜色等，还可以集成插件，实现更复杂的功能（弹幕播放、视频清晰度切换等）。

文档：Powerful danmaku video player | NPlayer

一、基础使用

NPlayer不仅支持vue2/3，还支持react，详看官方文档，本文以Vue3+TS整合为例子，带大家体验一下这款播放器。

下载依赖

pnpm i -S nplayer @nplayer/vue

在安装好依赖之后，还需要在main.ts中注册该插件

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

const app = createApp(App)
app.use(NPlayer)
app.mount('#app')

编写组件代码，只需要简单配置就可以实现播放功能，当然功能远远不至于止，请继续往下看，记得要在options中把视频播放链接替换自己的，用官网的加载不出来。

<script setup lang="ts">
import {PlayerOptions} from "nplayer";

// 播放器实例
let player = null;
const setPlayer = (p) => {
    // 设置播放器实例
    player = p;
};
// 播放器配置
const options: PlayerOptions = {
    // 视频播放链接
    src: "",
};
</script>

<template>
    <NPlayer :options="options" :set="setPlayer"/>
</template>

<style scoped>

</style>

这样就实现基础的播放功能

二、播放器配置

在实现完播放功能之后，我们可以根据自己的需求，对播放器进行进一步的配置，比如设置封面、快进时长、控制条配置等等。

以下是笔者自己整理的常用的一些配置，更详细可以看官网

本文标签： 播放器 快来 弹幕

版权声明：本文标题：一款可以发送弹幕的播放器，快来看看 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1754948099a3053772.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。