Adding Video to Websites (embed.html)
Flussonic Media Server has a special page embed.html, which is intended for video insertion to a website and viewing video via a browser. Technically,
embed.html is the same player that is used in the web interface of Flussonic Media Server.
The page with the player is available via the link:
The page automatically detects a browser version and selects a supported video protocol. For the majority of devices it's HLS (the player uses it by default).
Video might start without sound due to the autoplay policy of browser vendors. The following link explains the policy and conditions for the sound to turn on automatically. See Chrome autoplay policy as an example
There are two ways to use the embed.html player:
- When opening embed.html directly (by entering the link in the address bar), the video will expand to the size of the browser window and start playing automatically.
Also, you can use
embed.htmlto insert video on a website as a part of a web page. The HTML code for insertion is available on the Overview page of each stream in the web interface.
html <iframe style="width:640px; height:480px;" allowfullscreen src="http://hostname/streamname/embed.html"></iframe>
The code inserts a player window with fixed dimensions (640x480px) to a web page. Playback starts automatically.
For most tasks no additional configuration is required, but still
embed.html has parameters that you can specify as part of the URL, for example:
- autoplay — autostarts playing video once the page is opened. The default value is
true. To disable autostart, set
false. Displays screenshots before viewing. Sound availability is defined by the browser policy.
- volume - initial sound volume level, possible values: volume=0-100.
- mute - managing sound, available value
- play_duration — the number of seconds until video playback stops. The default value is
off. Useful for saving traffic.
- realtime (realtime=true) — enables broadcasts via low latency protocols. Automatically selects from MSE-LD, RTMP or WebRTC. Is 'false' by default, set the
truevalue to enable video playback with low latency.
Low-latency broadcasting consumes more CPU and network resources, so do not use it without a real need.
- dvr — opens the archive player. To access the file, specify the value true. See DVR player below for details.
- ago — allows users to rewind back. The value is specified in seconds. The default is off. It's more convenient than DVR player for viewing video in the last few minutes or hours. Ideal for pausing and rewinding live video on the site. For example, to set the possibility to rewind for an hour: embed.html?ago=3600.
- from — the Unix timestamp from where to start playing. If this option is specified, the player will play the timeshift-abs playlist starting from the specified time.
- to — the Unix timestamp where to end playing. Used only together with from. The player will open HLS VOD, and rewinding will be available within the specified time interval.
- liveSyncDurationCount — sets the number of buffered segments for playing HLS streams. Helps prevent delays due to network instability. Do not use together with
realtime=true. Example: embed.html?liveSyncDurationCount=4
Example of accessing the archive to view recorded video
To access a recording of a TV show, use the link with
It is better to generate such links via server-side scripts, based on program guide (EPG), for the organization of a CatchUp service.
To play a stream's DVR archive, open the player by using the link:
This DVR player plays recorded video from the archive, and it offers the calendar to navigate large archives in addition to the timeline.
The player interface allows you to set the timeline scale, enable fast playback, and save the specified interval as an MP4 file.
The DVR player supports all additional URL parameters, except ago.
The player interface allows you to automatically generate links in format embed.html?dvr=true&from=1511300552 without using additional tools. Just click a right time point on the timeline and click on the clock to open the link with the from parameter.