API Docs for: 0.2.38
Show:

File: src/components/player.js

// Copyright 2014 Globo.com Player authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

var BaseObject = require('../base/base_object')
var CoreFactory = require('./core_factory')
var Loader = require('./loader')
var assign = require('lodash.assign')
var find = require('lodash.find')
var Events = require('events')
var uniqueId = require('../base/utils').uniqueId
var PlayerInfo = require('./player_info')

/**
 * @class Player
 * @constructor
 * @extends BaseObject
 * @module components
 * @example
 *     // Creates an instance:
 *     var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
 */
class Player extends BaseObject {

  /**
   * ## Player's constructor
   *
   * You must pass the options object to build the player.
   * ```javascript
   * var options = {source: "http://example.com/video.mp4", param1: "val1"};
   * var player = new Clappr.Player(options);
   * ```
   *
   * @method constructor
   * @param {Object} options Data
   * options to build a player instance
   * @param {Number} [options.width]
   * player's width
   * @param {Number} [options.height]
   * player's height
   * @param {Boolean} [options.autoPlay]
   * automatically play after page load
   * @param {Boolean} [options.loop]
   * automatically replay after it ends
   * @param {Boolean} [options.chromeless]
   * player acts in chromeless mode
   * @param {Boolean} [options.muted]
   * start the video muted
   * @param {Boolean} [options.persistConfig]
   * persist player's settings (volume) **default**: `true`
   * @param {String} [options.preload]
   * video will be preloaded according to `preload` attribute options **default**: `'metadata'`
   * @param {Number} [options.maxBufferLength]
   * the default behavior for the **HLS playback** is to keep buffering indefinitely, even on VoD. This replicates the behavior for progressive download, which continues buffering when pausing the video, thus making the video available for playback even on slow networks. To change this behavior use `maxBufferLength` where **value is in seconds**.
   * @param {String} [options.gaAccount]
   * enable Google Analytics events dispatch **(play/pause/stop/buffering/etc)** by adding your `gaAccount`
   * @param {String} [options.gaTrackerName]
   * besides `gaAccount` you can optionally, pass your favorite trackerName as `gaTrackerName`
   * @param {Object} [options.mediacontrol]
   * customize control bar colors, example:
   *
   * ```javascript
   *   var player = new Clappr.Player({
   *     source: "http://your.video/here.mp4",
   *     mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}
   *   });
   * ```
   * Result:
   *
   * ![Clappr with modified media control colors](https://s3.amazonaws.com/cdn.clappr.io/screenshot.png)
   * @param {String} [options.poster]
   * define a poster by adding its address `http://url/img.png`. It will appear after video embed, disappear on play and go back when user stops the video.
   */
  constructor(options) {
    super(options)
    window.p = this
    var defaultOptions = {playerId: uniqueId(""), persistConfig: true, width: 640, height: 360, baseUrl: 'http://cdn.clappr.io/latest'}
    this.options = assign(defaultOptions, options)
    this.options.sources = this.normalizeSources(options)
    this.loader = new Loader(this.options.plugins || {})
    this.coreFactory = new CoreFactory(this, this.loader)
    PlayerInfo.currentSize = {width: options.width, height: options.height}
    if (this.options.parentId) {
      this.setParentId(this.options.parentId)
    }
  }

  setParentId(parentId) {
    var el = document.querySelector(parentId)
    if (el) {
      this.attachTo(el)
    }
  }

  /**
   * attach player to element
   *
   * @method attachTo
   * @param {Object} element Data
   * You can use this method to attach the player to a given `element`. You don't need to do this when you specify it during the player instantiation passing the parentId param.
   */
  attachTo(element) {
    this.options.parentElement = element
    this.core = this.coreFactory.create()
    this.addEventListeners()
  }

  addEventListeners() {
    this.listenTo(this.core.mediaControl,  Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged)
    var container = this.core.mediaControl.container
    if (!!container) {
      this.listenTo(container, Events.CONTAINER_PLAY, this.onPlay)
      this.listenTo(container, Events.CONTAINER_PAUSE, this.onPause)
      this.listenTo(container, Events.CONTAINER_STOP, this.onStop)
      this.listenTo(container, Events.CONTAINER_ENDED, this.onEnded)
      this.listenTo(container, Events.CONTAINER_SEEK, this.onSeek)
      this.listenTo(container, Events.CONTAINER_ERROR, this.onError)
      this.listenTo(container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate)
    }
  }

  containerChanged() {
    this.stopListening()
    this.addEventListeners()
  }

  onPlay() {
    this.trigger(Events.PLAYER_PLAY)
  }

  onPause() {
    this.trigger(Events.PLAYER_PAUSE)
  }

  onStop() {
    this.trigger(Events.PLAYER_STOP, this.getCurrentTime())
  }

  onEnded() {
    this.trigger(Events.PLAYER_ENDED)
  }

  onSeek(percent) {
    this.trigger(Events.PLAYER_SEEK, percent)
  }

  onTimeUpdate(position, duration) {
    this.trigger(Events.PLAYER_TIMEUPDATE, position, duration)
  }

  onError(error) {
    this.trigger(Events.PLAYER_ERROR, error)
  }

  is(value, type) {
    return value.constructor === type
  }

  normalizeSources(options) {
    var sources = options.sources || (options.source !== undefined? [options.source.toString()] : [])
    return sources.length === 0 ? ['no.op'] : sources
  }

  resize(size) {
    this.core.resize(size);
  }

  load(sources, mimeType) {
    this.core.load(sources, mimeType)
  }

  destroy() {
    this.core.destroy()
  }

  play() {
    this.core.mediaControl.container.play();
  }

  pause() {
    this.core.mediaControl.container.pause();
  }

  stop() {
    this.core.mediaControl.container.stop();
  }

  seek(time) {
    this.core.mediaControl.container.setCurrentTime(time);
  }

  setVolume(volume) {
    this.core.mediaControl.container.setVolume(volume);
  }

  mute() {
    this.core.mediaControl.container.setVolume(0);
  }

  unmute() {
    this.core.mediaControl.container.setVolume(100);
  }

  isPlaying() {
    return this.core.mediaControl.container.isPlaying();
  }

  getPlugin(name) {
    var plugins = this.core.plugins.concat(this.core.mediaControl.container.plugins);
    return find(plugins, function(plugin) {
      return plugin.name === name;
    });
  }

  getCurrentTime() {
    return this.core.mediaControl.container.getCurrentTime()
  }

  getDuration() {
    return this.core.mediaControl.container.getDuration()
  }
}

module.exports = Player