Flussonic Media Server documentation

Embedding video into your web site

There exists a special page (usually called "embed"), which shows the selected stream in the player, and takes up the entire browser window size. If this page is inserted on your website as an iframe, then the player is resized to full size of that iframe. Therefore, this page is useful to insert videos into your website.

The size of the video can be adjusted by the size of the iframe, and additional parameters to customize by changing the URL of the page. If you do not specify any additional parameters, embed try to define them itself (for example, whether it's running in a mobile browser, and based on this switch to HLS + HTML5 tag video).

Embed URL looks like this: http://FLUSSONIC_ADDR:HTTP_PORT/STREAM_NAME/embed.html?dvr=false&proto=PROTO&autoplay=AUTOPLAY&play_duration=PLAY_DURATION.

Not all options need to specify. For example, here's the short form: http://flussonic:8080/mychannel/embed.html?dvr=false.

Detailed description of parameters:

  • FLUSSONIC_ADDR - the name or IP of your server;
  • HTTP_PORT - this page is given over HTTP. Flussonic use ports 80 and 8080 by default;
  • STREAM_NAME - the name of the stream you want to play;
  • dvr=false - mandatory parameter which should be set to false. If you enable dvr=true option, it will show special DVR player (flash player that recieve video via RTMP), and all options below will be disabled (at least, have no effect, but it's better not to use it at all).
  • PROTO - the protocol that will be used for broadcasting. It may take several values:
    • proto=rtmp - play using RTMP in StrobeMediaPlayer (Flash player);
    • proto=hds - play using HDS in GrindPlayer (Flash player);
    • proto=hls - on Apple devices and Android - HLS using tag video, in other cases - HLS in the StrobeMediaPlayer (Flash player);
    • proto=hls_video - play via HLS using HTML5 video tag;
    • proto=hls_flash - play using HLS in StrobeMediaPlayer (Flash player);
    • proto=dash - play via MPEG-DASH using HTML5 video tag;
    • proto=mse - HTML5 (MSE) low delay playback;
    • if you do not specify this option - the player will choose what protocol to use and how to output video. On Apple and Android devices it will use HLS using HTML5 video tag, in other cases - HLS or HDS in the StrobeMediaPlayer or GrindPlayer (Flash player);
  • AUTOPLAY - whether to start playing the video immediately after the opening page (iframe)
    • autoplay=true - run;
    • autoplay=false - don't run;
    • if you do not specify this option - default option (run) will be used, as in autoplay = true;
  • PLAY_DURATION - how many seconds after the start the player automatically swtiched to pause mode. Technically, "timeupdate" handler will be set using JavaScript, for the HTML5 video tag or for StrobeMediaPlayback.
    • play_duration=15 - time in seconds;
    • if you do not specify this option - the player will not automatically go into pause mode;

Parameters for playing DVR Anchor Anchor x2

  • works only in conjunction with dvr=true
  • from and to - unixtime in UTC time zone, lower and upper bound of a timeline. If you enable at least from parameter, embed will show DVR recording instead of live. Parameter from is mandatory, and to is optional. I you use only from parameter, it will play in a stream mode, without any finishing time defined. Technically, under the hood it will generate and request URLs like "index-....-....m3u8", that are standard URLs of DVR API. Works for HLS and HDS only.

With such an URL, you can insert a video on your page, simply pasting it into your HTML code like this:

<iframe style="width:853px; height:480px;" src="http://flussonic:8080/mychannel/embed.html?dvr=true&proto=rtmp"> </iframe>

Note the use of style="width:853px; height:480px;", so you can adjust the size of embed to 853x480 pixels.