Amazon Interactive Video Service Player: SDK for Web Guide - Amazon Interactive Video Service

Amazon Interactive Video Service Player: SDK for Web Guide

The Amazon Interactive Video Service (IVS) Player SDK for Web can be integrated with player frameworks like Video.js or used standalone on top of an HTML <video> element.

Latest version of Web player: 1.0.0

Reference documentation: For information on the most important methods available in the Amazon IVS Web player, see the reference documentation at https://aws.github.io/amazon-ivs-player-docs/1.0.0/web/.

Getting Started

We provide support through a script tag as well as through an npm module.

Demo

The following live demo shows how to use the Web player with a script tag from our Content Delivery Network: Amazon IVS Player Sample.

Setup With Script Tag

To set up the Amazon IVS player using the script tag:

  1. Include the following tag (for the latest version of the player).

    <script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js">
  2. Once amazon-ivs-player.min.js is loaded, it adds an IVSPlayer variable to the global context. This is the library you will use to create a player instance. First, check isPlayerSupported to determine if the browser supports the IVS player:

    if (IVSPlayer.isPlayerSupported) { ... }

    Then, to create a player instance, call the create function on the IVSPlayer object.

    const player = IVSPlayer.create();

    The Amazon IVS Player SDK for Web uses web workers to optimize video playback.

  3. Load and play a stream using the load and play functions on the player instance:

    player.load(PLAYBACK_URL); player.play();

    where PLAYBACK_URL is the URL returned from the Amazon IVS API when a stream key is requested.

Sample Code

In this example, PLAYBACK_URL is the source stream you want to load. The example uses the latest version of the Amazon IVS player.

<script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js"></script> <video id="video-player" playsinline></video> <script> if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); player.load(PLAYBACK_URL); player.play(); } </script>

In the <video> tag, playsinline is required for inline playback on iOS Safari. See https://webkit.org/blog/6784/new-video-policies-for-ios/.

Setup With NPM

For guidance, including an example Webpack configuration file, see the following repository: https://github.com/aws-samples/amazon-ivs-player-web-sample.

TypeScript

If you’re using TypeScript, the npm package includes types you may want to import and use. For information on these types, see the Amazon IVS Player: SDK for Web Reference.

Framework Integrations

The Amazon IVS Player SDK for Web is designed to be easy to integrate with your framework of choice. We offer an official Video.js integration (“tech,” in Video.js jargon).

The following is a brief comparison of the Web players we offer:

Player Type Description UI Plugins
Amazon IVS Player SDK for Web A lightweight and customizable option for developers who want more control. No No

Amazon IVS Player Tech for Video.js

A full-featured option, which may be appropriate if you already use Video.js and want a turnkey solution. Yes

(Video.js Skins)

Yes

(Video.js Plugins)

Working With Content Security Policy

The Amazon IVS Web player SDK is configured to work on pages that use Content Security Policy (CSP). A few key CSP directives must be in place. Here, we describe a minimal set of directives that are necessary. Additional directives and sources are likely necessary, depending on your specific setup.

If the SDK library assets are hosted on the same origin, the following directives are necessary:

media-src blob:; connect-src 'self' *.live-video.net; script-src 'self';

Include 'self' in the directive if your CSP policy includes a worker-src directive.

If the library assets are hosted on a separate origin, and assuming, for illustration, that origin is resources.example.com, the following directives are necessary:

worker-src blob:; media-src blob:; connect-src resources.example.com *.live-video.net; script-src resources.example.com;