Skip to main content

Tracking Player Events with PlayerJS

Viostream's Player ships with an adapter for Player.js, a JavaScript library that provides a simple way to track player events using either our iframe or script embeds. This allows you to feed player events into third party tracking systems such as Google Analytics, Mixpanel, or Segment.

Include the Player.js Library​

In the <head> of your HTML, include the Player.js library:

<script src="https://cdn.embed.ly/player-0.1.0.min.js"></script>

Create a Player object​

Iframe embeds​

Embed your iframe as normal, but include an ID. You can then instantiate the Player object using the ID of the iframe:

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
    <iframe
        id="viostream-player-nhedxonrxsyfee"
        width="100%"
        height="100%"
        src="//play.viostream.com/iframe/nhedxonrxsyfee"
        referrerpolicy="strict-origin-when-cross-origin"
        allow="autoplay; encrypted-media; picture-in-picture"
        allowfullscreen
        frameborder="0"
        style="position:absolute; top:0; left: 0">
    </iframe>
</div>

<script>
    // Ensure the page is ready
    document.addEventListener("DOMContentLoaded", function () {
        const iframe = document.getElementById("viostream-player-nhedxonrxsyfee");
        const player = new window.playerjs.Player(iframe);

        // now add your listeners
    });
</script>

Script embeds​

For script embeds, add an ID to the wrapping div, and use this to instantiate your Player object:

<div id="viostream-embed-nhedxonrxsyfee">
  <script src="https://play.viostream.com/embed/nhedxonrxsyfee"></script>
</div>

<script>
    // Ensure the page is ready
    document.addEventListener("DOMContentLoaded", function () {
        const iframe = document.getElementById("viostream-embed-nhedxonrxsyfee").querySelector("iframe");
        const player = new window.playerjs.Player(iframe);

        // now add your listeners
    });
</script>

Add Event Listeners​

A range of events are available to listen for - please see the official documentation for all supported events. Some simple examples are given below.

// Play
player.on("play", function () {
    console.log("player:play");
});

// Pause
player.on("pause", function () {
    console.log("player:pause");
});

// Video finished
player.on("ended", function () {
    console.log("player:ended");
});