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:
https://WLTT_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: https://WLTT/mychannel/embed.html?dvr=false.

Detailed description of parameters:

  • WLTT_ADDR – the name or IP of streaming server;
  • HTTP_PORT – this page is given over HTTP. WLTT 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 StrobeMediaPlayer (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;
    • 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, the rewind hour is given by: embed.html?ago=3600.
    • proto=hls_flash – play using HLS in StrobeMediaPlayer (Flash player);
    • proto=dash – play via MPEG-DASH using HTML5 video tag;
    • 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 (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

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=“https://WLTT/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 853×480 pixels.