Language : English | 简体中文

bilibili-embed-renderer

It is better to use Bilibili's embed renderer component for React or Vue applications.

Please look Demo

Compared with the official embed renderer, bilibili-embed-renderer has been optimized as follows:

The player can be displayed in full screen
Enable HD resolution by default
Bullet Chatting is closed by default
Customize the width and height

Usage

in react usage

install deps

$ npm install react-bilibili-embed-renderer -S
# or
$ yarn install react-bilibili-embed-renderer
# or
$ pnpm install react-bilibili-embed-renderer -S

import component and css

import BilibiliEmbedRenderer from 'react-bilibili-embed-renderer'
import 'react-bilibili-embed-renderer/dist/bilibili-embed-renderer.css'

use component
```
<BilibiliEmbedRenderer aid="3787944" />
```

in vue usage

Support vue2 and vue3

install deps

$ npm install vue-bilibili-embed-renderer -S
# or
$ yarn install vue-bilibili-embed-renderer
# or
$ pnpm install vue-bilibili-embed-renderer -S

import component and css

You can use components alone or global register components.

// use alone in single vue component
import BilibiliEmbedRenderer from 'vue-bilibili-embed-renderer'
import 'vue-bilibili-embed-renderer/dist/bilibili-embed-renderer.css'

// or global register component in `main.ts`
import { createApp } from 'vue'
import App from './App.vue'
import BilibiliEmbedRenderer from 'vue-bilibili-embed-renderer'
import 'vue-bilibili-embed-renderer/dist/bilibili-embed-renderer.css'

const app = createApp(App)
app.component('BilibiliEmbedRenderer', BilibiliEmbedRenderer)
app.mount('#app')

use component
```
<BilibiliEmbedRenderer aid="3787944" />
```

Parameters

Parameters	Require	Default	Type	descript
`aid`	true		`String`	video's aid
`aspectWidth`	false	`4`or`16`	`Number`	Aspect ratio width (pc is `4`, and mobile is `16`)
`aspectHeight`	false	`3`or`9`	`Number`	Aspect ratio height (pc is `3`, and mobile is `9`)
`width`	false	`480`	`Number`	The width of the video window
`height`	false	`360`	`Number`	The height of the video window
`page`	false	`1`	`Number`	Sequence number in the video collection
`isWide`	false	`true`	`Boolean`	Whether to display widescreen or small screen
`highQuality`	false	`true`	`Boolean`	Whether to turn on high definition
`hasDanmaku`	false	`false`	`Boolean`	Whether to open the popup.
`iframeClass`	false		`String`	Iframe constom class

How to find parameters value? Open the video you want to use on Bilibili. You should find the share Button and focus it, then click 嵌入代码, finally you can get the following code.

<iframe
  src="//player.bilibili.com/player.html?aid=3787944&bvid=BV12s411X7z3&cid=6078845&page=1"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>

License