@linker-design/player v0.2.0
@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
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago