@gotipath/player v0.0.3

Gotipath Player API

The Gotipath Player API allows you to interact with and control an embedded Gotipath Player.

Installation

You can install the Gotipath Player API through either npm:

npm install @gotipath/player

Alternatively, you can reference an up‐to‐date version on our CDN:

<script src="https://player.gotipath.com/api/player.js"></script>

Getting Started

In order to control the Gotipath player, you need a player to control. There are a few ways to get a player:

Pre-existing player

Already have a player on the page? Pass the element to the Gotipath.Player constructor and you’re ready to go.

<iframe src="https://player.gotipath.com/video/76979871?h=8272103f6e" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.gotipath.com/api/player.js"></script>
<script>
    const iframe = document.querySelector('iframe');
    const player = new Gotipath.Player(iframe);

    player.on('play', function() {
        console.log('played the video!');
    });

    player.getVideoTitle().then(function(title) {
        console.log('title:', title);
    });
</script>

Create with a video id or url

You can use the library to make the embed for you. All you need is an empty element and the video id or Gotipath.com url (and optional embed options).

NOTE: If the video privacy settings are "Unlisted", instead of providing an id property, you will need to provide the full video URL as a url property and include the h parameter.

<div id="made-in-ny"></div>

<script src="https://player.gotipath.com/api/player.js"></script>
<script>
    const options = {
        id: 59777392,
        width: 640,
        loop: true
    };

    const player = new Gotipath.Player('made-in-ny', options);

    player.setVolume(0);

    player.on('play', function() {
        console.log('played the video!');
    });
</script>

Automatically with HTML attributes

When the library loads, it will scan your page for elements with Gotipath attributes. Each element must have at least a data-Gotipath-id or data-Gotipath-url attribute in order for the embed to be created automatically. You can also add attributes for any of the embed options, prefixed with data-Gotipath (data-Gotipath-portrait="false", for example).

NOTE: If the video privacy settings are "Unlisted", instead of providing a data-Gotipath-id attribute, you will need to provide the full video URL in a data-Gotipath-url attribute and include the h parameter.

<div data-Gotipath-id="19231868" data-Gotipath-width="640" id="handstick"></div>
<div data-Gotipath-url="https://player.gotipath.com/video/76979871?h=8272103f6e" id="playertwo"></div>

<script src="https://player.gotipath.com/api/player.js"></script>
<script>
    // If you want to control the embeds, you’ll need to create a Player object.
    // You can pass either the `<div>` or the `<iframe>` created inside the div.
    const handstickPlayer = new Gotipath.Player('handstick');
    handstickPlayer.on('play', function() {
        console.log('played the handstick video!');
    });

    const playerTwoPlayer = new Gotipath.Player('playertwo');
    playerTwoPlayer.on('play', function() {
        console.log('played the player 2.0 video!');
    });
</script>

Browser Support

The Player API library is supported in IE 11+, Chrome, Firefox, Safari, and Opera.

Migrate from Froogaloop

Using our old Froogaloop library? See the migration doc for details on how to update your code to use this library.

Using with a module bundler

If you’re using a module bundler like webpack or rollup, the exported object will be the Player constructor (unlike the browser where it is attached to window.Gotipath):

import Player from '@gotipath/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

Similarly, if you’re using RequireJS in the browser, it will also import the Player constructor directly:

<iframe src="https://player.gotipath.com/video/76979871?h=8272103f6e" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script>
    require(['https://player.gotipath.com/api/player.js'], function (Player) {
        const iframe = document.querySelector('iframe');
        const player = new Player(iframe);

        player.on('play', function() {
            console.log('played the video!');
        });
    });
</script>