@flussonic/flussonic-dvr-player
v24.7.4-93-g513207b
Published
Flussonic DVR player
Downloads
359
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-player
or using Yarn:
yarn add @flussonic/flussonic-dvr-player
Usage
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 { DvrInstance } = DVR;
if (DvrInstance) {
const instance = DvrInstance();
if (instance) {
instance.props.close();
}
}
};
}, [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 (token
by 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
),mse
by 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
)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 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
)motionUrl
- url for motion eventsenableMp4Download
- 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 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
srcObject
of<video>
to null - restartPlayer() - restarts playback
- changeLanguage(lang) - changes the language