Menu
Amazon CloudFront
Developer Guide (API Version 2016-09-29)

Embedding Strobe Media Playback for an Amazon CloudFront Live HTTP Stream in a Web Application

Follow one of these procedures to get the embed code that you will include in your web page for the live stream:

To embed Strobe Media Playback for your HTTP stream

  1. Download the latest version of Open Source Media Framework (OSMF), which contains Strobe Media Playback. OSMF is available at http://sourceforge.net/projects/osmf.adobe/files/.

  2. Unzip the file that you downloaded in step 1.

  3. In the location where you unzipped the downloaded file, find StrobeMediaPlayback.swf, and copy it to a location, such as an Amazon S3 bucket, that is accessible to your live-streaming users.

  4. Confirm that your users have the permissions necessary to access StrobeMediaPlayback.swf.

  5. Change permissions in the crossdomain.xml file to allow users to view the live stream using Strobe Media Playback. For more information, see How do I update crossdomain.xml for a Flash-based stream hosted on my own domain?

  6. In the location where you unzipped the downloaded file, find setup.html and open it in a web browser.

  7. On the Change Your Flash Vars page, in the Embed Parameters section, in the Source field, enter the full URL for StrobeMediaPlayback.swf. This is the file that you copied in step 3. For example:

    https://myawsbucket.s3.amazonaws.com/LiveStreaming/StrobeMediaPlayback.swf

  8. Open the AWS CloudFormation console at https://console.aws.amazon.com/cloudformation/.

  9. Select the stack for live streaming.

  10. In the bottom pane, click the Outputs tab.

  11. Copy the value of the LiveHDSManifest key, as shown in the following example:

    http://d123.cloudfront.net/hds-live/livepkgr/_definst_/liveevent/livestream.f4m

  12. Back on the Change Your Flash Vars page, in the Flash Vars section, in the src field, paste the value that you copied in step 11.

  13. At the bottom of the Change Your Flash Vars page, click Preview and Update.

  14. Play the video to ensure that you're satisfied with the current settings, and update the settings as needed.

  15. If you change any settings, click Preview and Update again.

  16. To embed Strobe Media Playback in a web page, copy the contents of the Preview Code text box, and paste it into the HTML code for your website.

To play your live HLS stream on an Apple device by using CloudFront

  1. Change permissions in the crossdomain.xml file to allow users to view the live stream using an Apple device. For more information, see How do I update crossdomain.xml for a Flash-based stream hosted on my own domain?

  2. Open the AWS CloudFormation console at https://console.aws.amazon.com/cloudformation/.

  3. Select the stack for live streaming.

  4. In the bottom pane, click the Outputs tab.

  5. Copy the value of the LiveHLSManifest key, as shown in the following example:

    http://d123.cloudfront.net/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8.

  6. Navigate to this URL using an iOS device to verify that HLS streaming is working correctly.

For information about where to use the URL to serve various iOS devices, QuickTime, and Safari, see HTTP Live Streaming Overview in the iOS Developer Library.

For more information about publishing and playing live streams over HTTP, see URLs for publishing and playing live streams over HTTP in the Adobe Media Server 5.0.1 Developer's Guide.

Next: Deleting an AWS CloudFormation Stack and an Amazon EBS Volume for Live Streaming