vue-wplayer 弹幕视频播放器

文档

示例: http://wplayer.kuukaa.fun/examples

文档: http://wplayer.kuukaa.fun/guide/quick_start.html

安装

npm install vue-wplayer

示例

<template>
  <div class="container">
    <div class="player-container">
      <w-player class="player" :options="options"></w-player>
    </div>
  </div>
</template>

<script setup lang="ts">
import { WPlayer } from 'vue-wplayer';

const options = {
  resource: "视频链接",
}
</script>

<style>
.container {
  width: 720px;
}

.player-container {
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;

}

.player {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
}
</style>

参数

内容	类型	描述	默认值
resource	string 或 不同清晰度信息对象	视频资源	-
type	string	视频类型	'mp4'
blob	bool	mp4是否开启blob	false
mobile	bool	是否为移动端	false
theme	string	主题色	'#4b5cc4'
playbackSpeed	[]	播放速度	[0.5, 0.75, 1, 1.5, 2]
danmaku.open	bool	是否开启弹幕	false
danmaku.placeholder	string	弹幕输入提示	'在这里输入弹幕哦~'
danmaku.data	[]	弹幕数据	-
danmaku.send	function	发送弹幕回调函数	-