Logo

Application collectors

AWS IVS Media Player

v2.26.0 • For the Javascript Collector

The AWS IVS Media Player Extension is a configuration option for the Javascript Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the AWS IVS Player plugin into your web application with the following snippet:

1<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
  • Insert this line into your HTML

  • Replace the CONFIG_ID value with Collector configuration id.

This inserts Datazoom's data collection SDK into the page.

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

1<script src=&quot;https://player.live-video.net/1.21.0/amazon-ivs-player.min.js&quot;></script>

Activate Data Collection for an AWS IVS Player

To activate data collection for an AWS IVS Player instance, create a Datazoom context which references the player instance with the following snippet:

1datazoom_context = datazoom.createContext(aws_ivs_player);

For example:

1<!DOCTYPE html>2<html lang=&quot;en&quot;>34<head>5    <!-- THE AWS IVS SCRIPT -->6    <script src=&quot;https://player.live-video.net/1.16.0/amazon-ivs-player.min.js&quot;></script>7    <!-- THE DATAZOOM BEACON SCRIPT -->8    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>9</head>1011<body>12    <!-- THE VIDEO PLAYER -->13    <div>14       <video id=&quot;video&quot; style=&quot;width:50%;height:50%&quot; controls></video>15    </div>16    <script>17      var aws_ivs_player;18      var datazoom_context;19      var url = &quot;https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8&quot;;20      21      // Create a Player instance22      if (IVSPlayer.isPlayerSupported) {23            aws_ivs_player = IVSPlayer.create();24            aws_ivs_player.attachHTMLVideoElement(document.getElementById(&quot;video&quot;));25            aws_ivs_player.load(url);26            27            // Activates data collection28            datazoom_context = datazoom.createContext(aws_ivs_player);29        }30    </script>31</body>3233</html>

Stop Data Collection

If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy() method of the Datazoom context object as in the following example:

1if (aws_ivs_player) {2    aws_ivs_player.delete();3    aws_ivs_player = null;4}56if (datazoom_context) {7    datazoom_context.destroy();8    datazoom_context = null;9}

NPM (Node Package Manager)

We have made it convenient to manage your Amazon IVS Collector integration by providing NPM (Node Package Manager) support. Please see installation details here.

References:

Amazon IVS Web Player SDK Reference

Additional Examples

IVS plugin (tech) through a videojs player

1<!DOCTYPE html>2<html lang=&quot;en&quot;>34<head>5    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css&quot;>6    <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js&quot;></script>7    <script src=&quot;https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js&quot;></script>8    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script>9</head>1011<body>1213<div>14    <div id=&quot;video-container&quot; style=&quot;width:50%&quot;>15        <video id=&quot;video&quot; class=&quot;video-js vjs-16-9 vjs-big-play-centered&quot; controls></video>16    </div>17    <hr/>18    <button id=&quot;src_bunny&quot;>Bunny</button>19    <button id=&quot;src_bipbop&quot;>BipBop</button>20    <br/>21    <input id=&quot;src&quot; type=&quot;text&quot; style=&quot;width:80%&quot;></input>22    <hr/>23    <button id=&quot;create&quot;>Create</button>24    <button id=&quot;destroy&quot;>Destroy</button>25</div>2627<script>2829    registerIVSTech(videojs); // Register Amazon IVS as playback technology for Video.js3031    var vjs_player;32    var datazoom_context;3334    var elSource = document.getElementById(&quot;src&quot;);3536    function setSourceURL(url) { elSource.value = url; }3738    document.getElementById(&quot;src_bunny&quot;).onclick = function() {39        setSourceURL(&quot;https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8&quot;);40    };41    document.getElementById(&quot;src_bipbop&quot;).onclick = function() {42        setSourceURL(&quot;https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8&quot;);43    };4445    document.getElementById(&quot;create&quot;).onclick = function() {46        var url = elSource.value;47        if (!url) {48            alert(&quot;Error: source URL is empty&quot;);49            return;50        }5152        vjs_player = videojs(&quot;video&quot;, { techOrder: [ &quot;AmazonIVS&quot; ] }, function() {53            datazoom_context = datazoom.createContext(vjs_player.getIVSPlayer());54            vjs_player.src(url);55        });56    };5758    document.getElementById(&quot;destroy&quot;).onclick = function() {59        if (vjs_player) {60            vjs_player.dispose();61            vjs_player = null;62        }63        if (datazoom_context) {64            datazoom_context.destroy();65            datazoom_context = null;66        }67    };6869</script>7071</body>7273</html>

IVS plugin (tech) through JW Player

1<!DOCTYPE html>2<html lang=&quot;en&quot;>34<head>5    <script src=&quot;https://content.jwplatform.com/libraries/<your.js>&quot;></script>6    <script src=&quot;https://player.live-video.net/1.4.0/amazon-ivs-jw-provider.min.js&quot;></script>7    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script>8</head>910<body>1112<div>13    <div id=&quot;video&quot; style=&quot;width:50%&quot;></div>14    <hr/>15    <button id=&quot;src_bunny&quot;>Bunny</button>16    <button id=&quot;src_bipbop&quot;>BipBop</button>17    <br/>18    <input id=&quot;src&quot; type=&quot;text&quot; style=&quot;width:80%&quot;></input>19    <hr/>20    <button id=&quot;create&quot;>Create</button>21    <button id=&quot;destroy&quot;>Destroy</button>22</div>2324<script>2526    var jw_player;27    var datazoom_context;2829    var elSource = document.getElementById(&quot;src&quot;);3031    function setSourceURL(url) { elSource.value = url; }3233    document.getElementById(&quot;src_bunny&quot;).onclick = function() {34        setSourceURL(&quot;https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8&quot;);35    };36    document.getElementById(&quot;src_bipbop&quot;).onclick = function() {37        setSourceURL(&quot;https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8&quot;);38    };3940    document.getElementById(&quot;create&quot;).onclick = function() {41        var url = elSource.value;42        if (!url) {43            alert(&quot;Error: source URL is empty&quot;);44            return;45        }4647        var config = {48            playlist: [{ file: url, type: &quot;ivs&quot; }],49            width: 640,50            height: 36051        };5253        jw_player = jwplayer(&quot;video&quot;).setup(config);5455        jw_player.on(&quot;providerPlayer&quot;, function(providerPlayer) {56            datazoom_context = datazoom.createContext(providerPlayer.ivsPlayer);57        });58    };5960    document.getElementById(&quot;destroy&quot;).onclick = function() {61        if (jw_player) {62            jw_player.remove();63            jw_player = null;64        }65        if (datazoom_context) {66            datazoom_context.destroy();67            datazoom_context = null;68        }69    };7071</script>7273</body>7475</html>

Ad Frameworks Extensions

If your Javascript application has a media player with an ad framework, Datazoom’s Javascript Collector with a AWS IVS Media Player can be extended with the following ad framework extensions.