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.2.0

Reference documentation: For information on the most important methods available in the Amazon IVS Web player, see the reference documentation at

Getting Started

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


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="">
  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:


    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=""></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);; } </script>

In the <video> tag, playsinline is required for inline playback on iOS Safari. See

Setup With NPM

For guidance, including an example Webpack configuration file, see the following repository:


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)


(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.

Hosting Assets on the Same Origin

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

media-src blob:; connect-src 'self' *; script-src 'self';

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

Hosting Assets on a Separate Origin

If the library assets are hosted on a separate origin from your page, and assuming, for illustration, that origin is, additional directives are necessary.

For all browsers except Safari:

worker-src blob:; media-src blob:; connect-src *; script-src;

For Safari (which does not support the worker-src or the blob: protocol for the script-src directive):

media-src blob:; connect-src *; script-src 'unsafe-eval';

Note: Due to Safari’s limited CSP support, it requires a very lenient CSP policy (one including unsafe-eval). This works against the whole point of CSP, to limit dangerous JavaScript from running on a page. With Safari, to avoid having dangerous JavaScript run on your page, we recommend that you host the library assets on the same origin as your page and use our same-origin CSP policy (above).

Known Issues and Workarounds

  • When playing a VOD on an iOS mobile browser (e.g. Safari or Chrome), seeking backwards will mute the player.

    Workaround: Call player.setMuted(false) after seeking.

  • When playing a VOD on an iOS mobile browser, seeking backwards works intermittently when directly selecting the desired position.

    Workaround: Drag the seek bar to the desired position.

  • When playing a VOD on an iOS mobile browser using the Video.js integration, the replay button does not work properly.

    Workaround: Hide the replay button when initializing Video.js. See