Skip to content

Latest commit

 

History

History
169 lines (103 loc) · 8.43 KB

_index.md

File metadata and controls

169 lines (103 loc) · 8.43 KB
Raw
pcx_content_type title weight
reference
Use the Stream Player
2

Use the Stream Player

Cloudflare provides a customizable web player that can play both on-demand and live video, and requires zero additional engineering work.

To add the Stream Player to a web page, you can either:

  • Generate an embed code in the Stream Dashboard for a specific video or live input.
  • Use the code example below, replacing <VIDEO_UID> with the video UID (or signed token and <CODE> with the your unique customer code, which can be found in the Stream Dashboard.
<iframe
  src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
  style="border: none"
  height="720"
  width="1280"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

Stream player is also available as a React or Angular component.

Player Size

Fixed Dimensions

Changing the height and width attributes on the iframe will change the pixel value dimensions of the iframe displayed on the host page.

<iframe
  src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
  style="border: none"
  height="400"
  width="400"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

Responsive

To make an iframe responsive, it needs styles to enforce an aspect ratio by setting the iframe to position: absolute; and having it fill a container that uses a calculated padding-top percentage.

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
  <iframe
    src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

Basic Options

Player options are configured with querystring parameters in the iframe's src attribute. For example:

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

{{}}

  • autoplay {{}}default: false{{}}

    • If the autoplay flag is included as a querystring parameter, the player will attempt to autoplay the video. If you don't want the video to autoplay, don't include the autoplay flag at all (instead of setting it to autoplay=false.) Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don't have unlimited Internet access before using this attribute.

      {{

      }} Some browsers now prevent videos with audio from playing automatically. You may set muted to true to allow your videos to autoplay. For more information, refer to New <video> Policies for iOS. {{}}

  • controls {{}}default: true{{}}

    • Shows video controls such as buttons for play/pause, volume controls.

  • defaultTextTrack

    • Will initialize the player with the specified language code's text track enabled. The value should be the BCP-47 language code that was used to upload the text track. If the specified language code has no captions available, the player will behave as though no language code had been provided.

      {{

      }}

This will only work once during initialization. Beyond that point the user has full control over their text track settings.

    {{</Aside>}}

  • letterboxColor

    • Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player's UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.

      {{

      }}

Note: Like all query string parameters, this value must be URI encoded. For example, the color value hsl(120 80% 95%) can be encoded using JavaScript's encodeURIComponent() function to hsl(120%2080%25%2095%25).

{{</Aside>}}

  • loop {{}}default: false{{}}

    • If enabled the player will automatically seek back to the start upon reaching the end of the video.

  • muted {{}}default: false{{}}

    • If set, the audio will be initially silenced.

  • preload {{}}default: none{{}}

    • This enumerated option is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may specify the value preload="auto" to preload the beginning of the video. Not including the option or using preload="metadata" will just load the metadata needed to start video playback when requested.

      {{

      }}

The <video> element does not force the browser to follow the value of this option; it is a mere hint. Even though the preload="none" option is a valid HTML5 option, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligible.

  {{</Aside>}}

  • poster {{}}defaults to the first frame of the video{{}}

    • A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn't specified, a thumbnail image of the video is shown.

      {{

      }}

Note: Like all query string parameters, this value must be URI encoded. For example, the thumbnail at https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270 can be encoded using JavaScript's encodeURIComponent() function to https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D1s%26height%3D600.

    {{</Aside>}}

  • primaryColor

    • Any valid CSS color value provided will be applied to certain elements of the player's UI.

      {{

      }}

Note: Like all query string parameters, this value must be URI encoded. For example, the color value hsl(120 80% 95%) can be encoded using JavaScript's encodeURIComponent() function to hsl(120%2080%25%2095%25).

    {{</Aside>}}

  • src

    • The video id from the video you've uploaded to Cloudflare Stream should be included here.

  • startTime

    • A timestamp that specifies the time when playback begins. If a plain number is used such as ?startTime=123, it will be interpreted as 123 seconds. More human readable timestamps can also be used, such as ?startTime=1h12m27s for 1 hour, 12 minutes, and 27 seconds.

  • ad-url

    • The Stream Player supports VAST Tags to insert ads such as prerolls. If you have a VAST tag URI, you can pass it to the Stream Player by setting the ad-url parameter. The URI must be encoded using a function like JavaScript's encodeURIComponent().

{{}}

Debug Info

The Stream player Debug menu can be shown and hidden using the key combination Shift-D while the video is playing.

Live stream recording playback

After a live stream ends, a recording is automatically generated and available within 60 seconds. To ensure successful video viewing and playback, keep the following in mind:

  • If a live stream ends while a viewer is watching, viewers should wait 60 seconds and then reload the player to view the recording of the live stream.
  • After a live stream ends, you can check the status of the recording via the API. When the video state is ready, you can use one of the manifest URLs to stream the recording.

While the recording of the live stream is generating, the video may report as not-found or not-started.

{{}}Low-Latency HLS playback{{}}

If a Live Inputs is enabled for the Low-Latency HLS beta, the Stream player will automatically play in low-latency mode if possible. Refer to Start a Live Stream to enable this option.