Publishing livestreams

You can publish a livestream using an embed code for all livestreams encoded by Flowplayer and all remote livestreams. To embed a livestream you need to select the livestream you want to embed and also make sure that you have a player configuration that you can embed the livestream within.

Once you have the video we provide the following ways to embed a livestream:

• Iframe embed code
• JavaScript embed code

The preferred method is iframe embed since that is easiest to use and most common across the Internet.

In order to embed a livestream please take the following steps:

1. Find the livestream in the Livestream view
2. Click the Get Embed code button
3. Choose a player and options to embed the livestream
4. Copy paste the embed code using either iframe or JavaScript

The player will use the default poster image configured in your workspace settings. You can also configure an individual image through the Change poster link.

If you cannot find a good player configuration to use in step 3 please create a new player configuration that suits your specific requirements.

To learn more about advanced options to embed a player using livestreams outside of Flowplayer please see Embed/Publish a player.

Embed a livestream using iframe

Using an iframe embed code is a standard way to embed livestreams. We recommend using iframe embeds unless you specifically need something else. This iframe embed provides you with the following advantages:

1. The code is easy to copy
2. The player is isolated in its own “window” which prevents potential conflicts with other items on the page

The iframe embed code looks like this:

<div class="flowplayer-embed-container"
     style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width:100%;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          webkitAllowFullScreen mozallowfullscreen allowfullscreen
          src="//embed.flowplayer.com/api/video/embed.jsp?id=ddse9cb9d-b670-4453-a6bd-6c66e8d291e4&pi=3480668e-2322-4c18-b11a-92af07d07dd6"
          title="0" byline="0" portrait="0" width="640" height="360"
          frameborder="0" allow="autoplay"></iframe>
</div>

The iframe embed link provide you with a few options to override the player configurations.

Using an iframe embed code limits the amount of interaction with the player since it resides in its own "window". We always recommend to try to configure the player within our player builder as a first step since it contains a multitude of configuration options. However, if you want to access the player object directly and programmatically interact with it or customize it more than what is provided using the iframe embed options you should use the JavaScript embed code.

Embed a livestream using JavaScript

If you want to programmatically work with the player the best option is to use the JavaScript embed. This allows you to interact with the player and access the full Player API.

The JavaScript embed code looks like this:

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
    }
  </script>
</div>