flussonic-mse-player is a JavaScript library for playing video relies on flussonic backend, HTML5 video and MediaSource Extensions
npm install --save @flussonic/flussonic-mse-player
import FlussonicMsePlayer from '@flussonic/flussonic-mse-player'
...
const player = new FlussonicMsePlayer(element, url, opts)
Since the library include via script tag it is accesible at window.FlussonicMsePlayer
<script type="text/javascript" src="../../dist/FlussonicMsePlayer.js"></script>
var FlussonicMsePlayer = window.FlussonicMsePlayer
var player = new FlussonicMsePlayer(element, url, opts)
-
isSupported() - return
true
if browser is supported Media Source Extension -
replaceHttpByWS(url: string) - return new url where replaced http(s):// by ws(s)://
const player = new FlussonicMsePlayer(element, url, opts)
element
-
url
- url of a stream
opts
is plain object it can include methods:
-
debug?: boolean
- iftrue
then enable logs in browser console. And export methods humanTime, humanDate to window. -
progressUpdateTime?: number
- time period for invokingonProgress
. -
onProgress(utc: number)
- triggered every 100ms(progressUpdateTime) while a stream is playing and gives current playback time -
onMediaInfo(info: MediaInfo)
- triggered when metadata of the stream is available. metadata include a common information of the stream such as width, height, information about mbr streams and so on. After this callback triggered you can use getVideoTracks()/getAudioTracks() methods. -
onSeeked()
- triggered when process of seeking is finished -
onStartStalling()
- triggered when playing is stalled -
onEndStalling()
- triggered when the video tag is progressed(start playing).onStartStalling()/onEndStalling()
useful callback for implementation loading-spinner. -
•••DEPRECATED•••
bufferMode: 'segments'|'sequence'
- SourceBuffer Object Append Mode. Default value is'sequence'
. -
errorsBeforeStop: number
- Amount of errors will be happened before invoke the stop() method.
-
play(from?: UtcOrLive, videoTrack?: Track, audioTrack?: Track) => Promise - start playing.
Return a
Promise
. Resolved if HTMLMediaElement.play() resolved(HTMLMediaElement.play() Returns a Promise). Overwise rejected with error message.if you do autoplay="true" muted="false" video. The
play
will be rejected(Autoplay Policy Changes)For resolve this behaviour you can mute the video before playing. Or you can process play's rejection and show play button.
-
pause() - send
pause
command by websocket -
stop() - close websocket connection; detach mediaSource from given HTMLMediaElement; invoke the HTMLMediaElement stop method
-
seek(utc: number) - send
seek
command by websocket -
setTracks(tracks: Array) -
type MediaInfo = {
height: number,
width: number,
streams: Array<StreamInfo>,
activeStreams: ActiveStreams,
}
type StreamInfo = {
bitrate: number,
codec: string,
content: string,
fps: number,
height: number,
length_size: number,
level: string,
pixel_height: number,
pixel_width: number,
profile: "Baseline",
sar_height: number,
sar_width: number,
size: string,
track_id: TrackId,
width: number
}
type ActiveStreams = {
video: TrackId,
audio: TrackId,
}
type TrackId = 'a1'|'a2'|'a3'| ... 'aN'|'v1'|'v2'|'v3'| ... 'vN'
type UtcOrLive = number | 'live'