@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.

<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.

<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.

<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