Flussonic DVR Player is a JavaScript library for playing video archives and live streams. It relies on Flussonic backend.
Install flussonic-dvr-player from NPM by running the command:
npm install --save @flussonic/flussonic-dvr-player
or using Yarn:
yarn add @flussonic/flussonic-dvr-player
You can use the DVR Player as a React component:
import DvrPlayer from '@flussonic/flussonic-dvr-player';
import '@flussonic/flussonic-dvr-player/dist/fonts/font.css';
export const DVRPlayer = ({ options }) => {
const player = useRef(null);
useEffect(() => {
const DVR = DvrPlayer.load(options, player.current);
return function cleanup() {
const { DvrUnmount } = DVR;
if (DvrUnmount) DvrUnmount();
};
}, [options]);
return <div id="dvr-player" ref={player} style={{ height: '100%' }} />;
};or use it with a script tag:
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-dvr-player/dist/fonts/font.css">
<script src="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-dvr-player/dist/FlussonicDvrPlayer.js"></script>
</head>
<body>
<div id="dvr-player"></div>
<script type="text/javascript">
const options = {
name: 'YOUR_STREAM_NAME', // replace it with your stream name
streamer_http: window.location.protocol + '//' + window.location.host,
query: window.location.search.replace(/^\?/, ''),
};
const player = document.getElementById('dvr-player');
window.onload = function () {
window.FlussonicDvrPlayer = FlussonicDvrPlayer.default.load(options, player);
};
</script>
</body>Where:
player - HTML container for the player
options - a plain object, that can include:
required:
-
name- stream name -
streamer_http- the streamer's URL
additional:
-
tokenName- custom token name (tokenby default) -
token- authorization token -
streamer_rtmp- the stream's rtmp URL -
autoPlay- enable autoplay (true|false) -
fixedRange- locks the timeline on a current episode (true|false) -
proto- playback type for a live (mse|hls),mseby default -
from- start time of playback (utc in sec) -
to- stop time of playback (utc in sec) -
play_duration- stops playback after some playback duration (sec) -
thumbnails_enabled- enable/disable thumbnails (true|false) -
locale- player locale (ru|en) -
zoom- initial zoom for the timeline (sec) -
debug- debug mode (true|false) -
tracks- starting tracks for the live playback (string, example:v2a1) -
timeLineElement- external HTML container for the timeline -
onMediaInfo(data)- callback for getting media info data object -
onEvent(name, data?)- callback for player events, returns the event name and the possible data about it -
panzoom- zoom for video element (true|false) -
noMenu- render timeline menu element (true|false) -
centeredSeek- timeline seek with auto-centering (true|false) -
enableMp4Download- enable/disable download video segments (true|false) -
statsSendEnable- enable sending stats (true|false) -
statsSendTime- stats data sending interval (sec) -
localtime- use local user time (true|false) -
export_limit- export episode selection time limit (sec) -
start_track- adaptive track selection (lowest|best) -
dvr- dvr mode (true|false) -
enoughBufferTime- enough buffer time to disable a loading indicator (sec)
mosaic play mode:
-
streams- an array of stream names for mosaic -
multiTimeline- enable split timeline mode (true|false) -
streamingChannels- a plain object, that can include:-
renderTitles- show titles of streams (true|false) -
streams- an array of objects, that can include:-
subName- name of the stream -
address- stream may have its own address on the other Flussonic server -
main- should be selected first (true|false) -
auth_token- token name with a token (token=${token}) -
order- order of the playback window (number)
-
-
- play() - starts the playback
-
stop() - stops the playback, sets
srcObjectof<video>to null - restartPlayer() - restarts playback
- changeLanguage(lang) - changes the language