# dx-bplayer

> This is a simple HTML5 video player based on Vue.

Latest version **0.2.1** (published 2021-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install dx-bplayer
pnpm add dx-bplayer
yarn add dx-bplayer
bun add dx-bplayer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-04-30 |
| First published | 2020-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 152.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | wujianbo |
| Maintainers | boboyaohuo |
| Keywords | vue, Dx-BPlayer, BPlayer, player, video, vue-video |

## Links

- npm: https://www.npmjs.com/package/dx-bplayer
- Repository: https://github.com/boboyaohuo/Dx-BPlayer
- Homepage: https://github.com/boboyaohuo/Dx-BPlayer#readme
- Issues: https://github.com/boboyaohuo/Dx-BPlayer/issues
- npm.io page: https://npm.io/package/dx-bplayer

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2021-04-30
- 0.2.0 — 2021-04-21
- 0.1.5 — 2020-11-16
- 0.1.4 — 2020-09-03
- 0.1.3 — 2020-09-01
- 0.1.1 — 2020-08-31

## README

# Dx-BPlayer

This is a simple HTML5 video player based on Vue.

[![npm](https://img.shields.io/npm/v/dx-bplayer.svg?style=flat-square)](https://www.npmjs.com/package/dx-bplayer)
[![npm](https://img.shields.io/npm/l/dx-bplayer.svg?style=flat-square)](https://github.com/boboyaohuo/Dx-BPlayer/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/dt/dx-bplayer.svg?style=flat-square)](https://www.npmjs.com/package/dx-bplayer)

## Introduction

![avatar](https://raw.githubusercontent.com/boboyaohuo/staticFile/master/image/25.png)

## Install

```bash
npm install dx-bplayer -S
or
yarn add dx-bplayer
```

## Use

```javascript
# main.js
import DxBPlayer from 'dx-bplayer'
import 'dx-bplayer/lib/dx-bplayer.css'
Vue.use(DxBPlayer)
```

```js
<template>
  <DxBPlayer ref="DxBPlayer" :playerOptions="options" @created="created" />
</template>
<script>
  export default {
    data () {
      return {
        options: {
          url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
          cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
          muted: false,
          loop: false,
          preload: 'auto'
        }
      }
    },
    computed(){
      $video(){
        return this.$refs.DxBPlayer.$video
      }
    },
    methods:{
      created(){}
    }
  }
</script>
```

## Props

| Name                | Type    | Default | Description        |
| ------------------- | ------- | ------- | ------------------ |
| playerOptions       | Object  | --      | all player options |
| playerOptions.url   | String  | --      | video resources    |
| playerOptions.cover | String  | --      | video cover        |
| playerOptions.preload | String  | --      | video preload        |
| playerOptions.muted | Boolean | false   | video mute         |
| playerOptions.volume | Number | 1   | video volume         |
| playerOptions.loop  | Boolean | false   | video loop         |
| playerOptions.autoplay  | Boolean | false   | video autoplay         |
| playerOptions.scrollFixed  | Boolean | false   | video scrolling fixed         |

## Event
| Name          | Description             |
| ------------- | ----------------------- |
| created       | component created       |
| mounted       | component mounted       |
| beforeDestroy | component beforeDestroy |
| destroyed     | component destroyed     |
| ready         | video init              |
| play          | video play              |
| pause         | video pause             |
| clearMode     | video clearMode         |
| canplay       | video canplay           |
| wait          | video waiting           |
| fullscreen    | video fullscreen        |
| fixed         | video fixed change      |

## License

This content is released under the MIT License.

---
_Source: https://npm.io/package/dx-bplayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._