piksel v2.0.3

Piksel

An open source interface for embedding a piksel player on your page and interacting with its api. This simplifies the implementation process by abstraction.

• NOTE: This documentation is incomplete and will be updated when the package has been developed a little more.

• IMPORTANT: It's critical thatyou are using the HTML5 player in Piksel for the Javascript library to work. You can find this setting here: https://ovp.piksel.com/admin/projects/projectConfiguration.php If you are currently using the AppStudio Flash player, it is safe to upgrade the player to HTML5. You won't have to reembed your player. DOn't trust me though, test it first. ;) Beware too that when you save these settings that the Single Player is still selected in the General Settings sections at the bottom of the settings page. It has unselected itself on Update. If this happens the player will not load on the page.

Table of contents

• Development
• Deployment
• Import
• Instantiate the player
  • Instance Example
• Options
• Methods
• Events
  • Event Examples
• Piksel Resources
• Examples from Piksel support
• Additional Options

Development

To get started developing, open this repo, run npm install on the main directory, then run npm start. This will start a webserver on the /examples folder. In the /examples/src/index.js file you'll find an instantiation of code in /src. Running the dev server also runs the production build script in parallel.

Visit http://localhost:9000/ in your browser and you should see an instance of the player (assuming the videoUUID in the /examples/src/index.js Piksel instance is valid.)

Deployment

To deploy, make sure you've been running with npm start or run npm run build. Once the project has built, it will build to the /lib folder, run npm run release or npm publish. Your local npm user must be the Olympusat npm account to publish.

Import

import { Piksel } from 'piksel';

Instantiate the player

Each instance of the player adds a new player to the DOM for you, in the specified wrapper element. The element must exist or the Piksel class will throw an error.

Instance Example

new Piksel({ 
    basePlayerUrl: "https://player.piksel.com",
    playerID: '1234_player_made_up_id', 
    videoUUID: [YOUR VIDEO ID HERE],  
    injectID: 'pikselPlayer',
    clientAPI: null,
    projectID: null,
    unmutedByDefault: true,
    de: {
      "color-default": 'f4c441',
      "color-hover": 'f46741',
      "googleads-disable" : true,
      start: '900',
      end: '930',
      volume: '100',
      autoplay: true, 
      width: '900px',    
      height: '600px'
    }
  })
  .then(pikselPlayer => {
    console.log("Wrapper Player Instance ", pikselPlayer);
    console.log("Piksel Player Instance ", pikselPlayer._player);

    document.body.addEventListener(`piksel__pikselPlayer`, e => {
      // console.log("EVT piksel__pikselPlayer ", e);
    });
  
    document.body.addEventListener(`piksel__playing`, e => {
      console.log("EVT piksel__playing ", e);
    });
  
    document.body.addEventListener(`piksel__volumechange`, e => {
      console.log("EVT piksel__volumechange ", e);
    });
  });

The above instance expect there to be a div on the DOM with an id of "pikselPlayer" before its instantiated.

<div id="pikselPlayer"></div>

Options

See this for a reference: https://faith.piksel.com/admin/help/PikselFaithHTML5/Content/Topics/Players/HTML_5_Player_Parameters/08PlayerParameters.htm

• All props marked is legacy will be removed in the next major version (@3.0.0). You should use player de- property names inside the de object instead.

Methods

These exist on the player(wrapper) instance.

Events

There are two types of events that exist on the document.body element. 1. A player id based event that is fired anytime there is a player event. piksel__PLAYERID 2. A specific event that can be listened to, to reduce noise. piksel__EVENTNAME. See below for the event names.

Event Examples

  document.body.addEventListener(`piksel__1234_player_made_up_id`, e => {
  });

  document.body.addEventListener(`piksel__playing`, e => {
  });

  document.body.addEventListener(`piksel__volumechange`, e => {
  });

Piksel Resources

After instantiating the player, you have access to the _player object on the instance. This _player prop contains the original player, made available in case you need extended interaction with the core player.

Here are the docs where you'll find info about what's available on the player. http://docs.videojs.com/docs/api/player.html

Examples from Piksel support

https://jsfiddle.net/yxt290L9/

https://jsfiddle.net/shaolintibo/wdt0Lko6/

https://jsfiddle.net/ujxes910/

https://jsfiddle.net/ym5eLb99/

Additional Options

Pass any of these parameters to the de object on the instance options, without the de- prefix.