npm package: @linker-design-plus/player
Description: a player base on videojs
Author: Linker Design Team
Latest version: 0.2.1

# @LinkerDesign/Player

a player base on video.js. reusing videojs's component and plugin system to remaining revolution for web tech changes.

### Features

1. A standard UI for quick start.
2. Playback rate change out of box.
3. Resolution change out of box.
4. `Hls`, `Mp4`, `Webm`, `Ogg` out of box.

**_more codecs will come soon!_**

### Setup

```
npm i -S @linker-design/player
```

### Demos

#### **Basic**

use `mount` method to initialize the player.

```vue
<template>
  <video-js class="pc" ref="pl">
    <source
      src="//sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720pmp4"
      type="video/mp4"
    />
  </video-js>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { HPlayer } from '@linker-design/player';

const pl = ref();
const player = new HPlayer();

onMounted(() => {
  player.mount(pl.value);
});

onBeforeUnmount(() => {
  player.destroy();
});
</script>
<style>
.pc {
  width: 800px;
  height: 600px;
}
</style>
```

#### **Hls**

use `application/x-mpegURL` media type to play `Hls` live stream.

```vue
<template>
  <video-js class="pc" ref="pl">
    <!-- <source  src="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8" type="application/x-mpegURL" /> -->
  </video-js>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { HPlayer } from '@linker-design/player';

const pl = ref();
const player = new HPlayer();

onMounted(() => {
  player.mount(pl.value);
  player.src(
    'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
    'application/x-mpegURL'
  );
});

onBeforeUnmount(() => {
  player.destroy();
});
</script>
<style>
.pc {
  width: 800px;
  height: 600px;
}
</style>
```

#### **Resolution Change**

we can use `on` method to listen the `resolutionchanged` event. please listen events after player mounted.

```vue
<template>
  <video-js class="pc" ref="pl">
    <!-- <source  src="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8" type="application/x-mpegURL" /> -->
  </video-js>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { HPlayer } from '@linker-design/player';

const pl = ref();
const player = new HPlayer();

const resolveSourceByResolution = (resolution) => {
  let res =
    'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8';
  switch (resolution) {
    // auto
    case 1:
      res =
        'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8';
      break;
    // 360P
    case 2:
      res =
        'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo-360p.m3u8';
      break;
    // 720p
    case 3:
      res =
        'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo-720p.m3u8';
      break;
    // 1080p
    case 4:
      res =
        'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo-1080p.m3u8';
      break;
  }
  return res;
};

onMounted(() => {
  player.mount(pl.value);
  player.src(
    'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
    'application/x-mpegURL'
  );

  player.on('resolutionchanged', (e) => {
    const { resolution } = e.data;
    const time = player.currentTime;
    const src = this.resolveSourceByResolution(resolution);
    player.src(src, 'application/x-mpegURL');
    player.currentTime = time;
    player.play();
  });
});

onBeforeUnmount(() => {
  player.destroy();
});
</script>
<style>
.pc {
  width: 800px;
  height: 600px;
}
</style>
```

### Api

#### **HPlayer**

#### **_Constructor_**

`constructor(options: object)`

##### _Params_

- options: the configuration

  | name             | type      | description                          |
  | :--------------- | :-------- | :----------------------------------- |
  | `hideResolution` | `boolean` | whethe to hide the resolution button |
  | `hidePlayRate`   | `boolean` | whethe to hide the play rate button  |

#### **_Properties_**

| name          | type             | Modifier          | description                            |
| :------------ | :--------------- | :---------------- | :------------------------------------- |
| `vjs`         | `videojs Player` | `read`            | the under videojs player               |
| `currentTime` | `number`         | `read` \| `write` | the player current time in seconds     |
| `duration`    | `number`         | `read` \| `write` | the total time of the media in seconds |
| `paused`      | `boolean`        | `read`            | is player paused                       |

#### **_Methods_**

1. `mount(el: HTMLElement): void`

   mount player to dom

   ##### _Params_

   - el: a `HTMLElement` that player will mount to.

2. `src(mediaSrc: string, type: string): void`

   set the media for play

   ##### _Params_

   - mediaSrc: the media source url.
   - type: the media source type. supported type is `video/mp4`, `video/webm`, `video/ogg`, `application/x-mpegUR`.

3. `pause(paused: boolean): void`

   pause player

   ##### _Params_

   - paused: set player paused

4. `showResolution(show: boolean): void`

   whether to show the resolution button

   ##### _Params_

   - show: whether to show the resolution button. default is `true`

   ##### _tips_

   - this method should be invoked after mount;

5. `showPlayRate(show: boolean): void`

   whether to show the play rate button

   ##### _Params_

   - show: whether to show the play rate button. default is `true`

   ##### _tips_

   - this method should be invoked after mount;

6. `on(type: string | string[], handler: (e:Event)=>void): void`

   listen event of player

   ##### _Params_

   - type: the event types will be listened. it is can be a string or an array of string.
   - handler: a handler will handle the specific event.

7. `off(type: string | string[], handler?: (e:Event)=>void): void`

   unlisten the specific event of player

   ##### _Params_

   - type: the event types will be unlistened. it is can be a string or an array of string.
   - handler: the handler will be remove from the player specific event handler list.

8. `one(type: string | string[], handler: (e: Event) => void): void`

   listen the specific event, and the event handler will be invoked only one turn.

   ##### _Params_

   - type: the event types will be listened. it is can be a string or an array of string.
   - handler: a handler will handle the specific event.

9. `destroy(): void`

   destroy the player. and it is related resources.

test track <track src="http://192.1.3.166:9000/test/cybot/vtt/ai-video/35.vtt"/>