@flussonic/flussonic-dvr-player
v25.12.46
Published
Flussonic DVR player
Downloads
2,235
Keywords
Readme
flussonic-dvr-player
Flussonic DVR Player is a JavaScript library for playing video archives and live streams. It relies on Flussonic backend.
Installation
Install flussonic-dvr-player from NPM by running the command:
npm install --save @flussonic/flussonic-dvr-playeror using Yarn:
yarn add @flussonic/flussonic-dvr-playerUsage
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 namestreamer_http- the streamer's URL
additional:
tokenName- custom token name (tokenby default)token- authorization tokenstreamer_rtmp- the stream's rtmp URLautoPlay- enable autoplay (true|false)fixedRange- locks the timeline on a current episode (true|false)proto- playback type for a live (mse|hls),mseby defaultfrom- start time of playback (utc in sec)to- stop time of playback (utc in sec)play_duration- stops playback after some playback duration (sec)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 timelineonMediaInfo(data)- callback for getting media info data objectonEvent(name, data?)- callback for player events, returns the event name and the possible data about itpanzoom- 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)muted- controls whether audio is played by default. It depends on browser restrictions. If the browser does not allow autoplay with sound, the value will automatically switch to false. (true | false)
mosaic play mode:
streams- an array of stream names for mosaicmultiTimeline- 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 streamaddress- stream may have its own address on the other Flussonic servermain- should be selected first (true|false)auth_token- token name with a token (token=${token})order- order of the playback window (number)
Methods
- play() - starts the playback
- stop() - stops the playback, sets
srcObjectof<video>to null - restartPlayer() - restarts playback
- changeLanguage(lang) - changes the language
