@LinkerDesign/Player
a player base on video.js. reusing videojs's component and plugin system to remaining revolution for web tech changes.
Features
- A standard UI for quick start.
- Playback rate change out of box.
- Resolution change out of box.
-
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
-
mount(el: HTMLElement): void
mount player to dom
Params
- el: a
HTMLElement
that player will mount to.
- el: a
-
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
.
-
pause(paused: boolean): void
pause player
Params
- paused: set player paused
-
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;
- show: whether to show the resolution button. default is
-
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;
- show: whether to show the play rate button. default is
-
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.
-
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.
-
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.
-
destroy(): void
destroy the player. and it is related resources.
test track