How to use clappr - 10 common examples

},
        disableVideoTagContextMenu: true
      })
      this.player.on(Clappr.Events.PLAYER_PLAY, () => {
        // seek video on first player play, this will fix it on mobile too!
        if (media.playhead && !this.seeked) {
          this.player.seek(media.playhead)
        }
        // run the callback
        playCallback()
        this.seeked = true
      })
      this.player.on(Clappr.Events.PLAYER_PAUSE, () => {
        this.logTime()
      })
      this.player.on(Clappr.Events.PLAYER_ENDED, () => {
        this.logTime(media.duration)
      })
      this.player.on(Clappr.Events.PLAYER_ERROR, (error) => console.error('Error', error))
    }
  }

seriesTitle: media.collection_name,
            episode: media.episode_number || null
          }
        },
        playbackRateConfig: {
          defaultValue: '1.0',
          options: [
            {value: '0.5', label: '0.5x'},
            {value: '1.0', label: '1x'},
            {value: '1.5', label: '1.5x'},
            {value: '2.0', label: '2x'}
          ]
        },
        disableVideoTagContextMenu: true
      })
      this.player.on(Clappr.Events.PLAYER_PLAY, () => {
        // seek video on first player play, this will fix it on mobile too!
        if (media.playhead && !this.seeked) {
          this.player.seek(media.playhead)
        }
        // run the callback
        playCallback()
        this.seeked = true
      })
      this.player.on(Clappr.Events.PLAYER_PAUSE, () => {
        this.logTime()
      })
      this.player.on(Clappr.Events.PLAYER_ENDED, () => {
        this.logTime(media.duration)
      })
      this.player.on(Clappr.Events.PLAYER_ERROR, (error) => console.error('Error', error))
    }

_buildImg(thumb, height) {
    var scaleFactor = height / thumb.h
    var $img = $("<img>").addClass("thumbnail-img").attr("src", thumb.url)

    // the container will contain the image positioned so that the correct sprite
    // is visible
    var $container = $("<div>").addClass("thumbnail-container")
    $container.css("width", thumb.w * scaleFactor)
    $container.css("height", height)
    $img.css({
      height: thumb.imageH * scaleFactor,
      left: -1 * thumb.x * scaleFactor,
      top: -1 * thumb.y * scaleFactor
    })
    $container.append($img)
    return $container
  }
</div>

this._updateMarkerTime(marker)
    }
    marker.emitter.on("timeChanged", marker.timeChangedHandler)
    $marker.click((e) => {
      // when marker clicked seek to the exact time represented by the marker
      this.core.mediaControl.container.seek(marker.time)
      e.preventDefault()
      e.stopImmediatePropagation()
    })
    this._$markers.append($marker)

    // tooltip
    var $tooltip = marker.$tooltip;
    if ($tooltip) {
      // there is a tooltip
      let $tooltipContainer = $("<div>").addClass("tooltip-container")
      marker.$tooltipContainer = $tooltipContainer
      $tooltipContainer.append($tooltip)
      this._$tooltips.append($tooltipContainer)
      marker.tooltipChangedHandler = () =&gt; {
        // fired from marker if it's tooltip contents changes
        this._updateTooltipPosition(marker)
      }
      marker.emitter.on("tooltipChanged", marker.tooltipChangedHandler)
      this._updateTooltipPosition(marker)
    }
  }
</div>

_onAdaptation () {
    let activeVideo = this.videoTracks.filter((t) => t.active === true)[0]

    this._fillLevels()

    // update stats that may have changed before we trigger event
    // so that user can rely on stats data when handling event
    this._sendStats()

    if (this._pendingAdaptationEvent) {
      this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
      this._pendingAdaptationEvent = false
    }

    Log.debug('an adaptation has happened:', activeVideo)
    this.highDefinition = (activeVideo.height >= 720)
    this.trigger(Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition)
    this.trigger(Events.PLAYBACK_BITRATE, {
      bandwidth: activeVideo.bandwidth,
      width: activeVideo.width,
      height: activeVideo.height,
      level: activeVideo.id,
      bitrate: activeVideo.videoBandwidth
    })
  }

bindEvents() {
    if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
      // Clappr 0.3.0 or greater
      this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this._onMediaControlContainerChanged)
    } else {
      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged)
    }
    this.listenTo(this.core, Events.CORE_READY, this._onCoreReady)
    Mediator.on(`${this.core.options.playerId}:${Events.PLAYER_RESIZE}`, this._onPlayerResize, this)
  }

bindEvents() {
    // Clappr 0.3 support
    if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
      this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.rebindEvents)
    }
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this._onMouseLeave)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this._init)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged)
  }

bindEvents() {
    // Clappr 0.3 support
    if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
      this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.rebindEvents)
    }
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this._onMouseLeave)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this._init)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged)
  }

bindEvents() {
    // Clappr 0.3 support
    if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
      this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.rebindEvents)
    }
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this._onMouseLeave)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this._init)
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged)
  }

bindEvents() {
    if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
      // Clappr 0.3.0 or greater
      this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this._onMediaControlContainerChanged)
    } else {
      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged)
    }
    this.listenTo(this.core, Events.CORE_READY, this._onCoreReady)
    Mediator.on(`${this.core.options.playerId}:${Events.PLAYER_RESIZE}`, this._onPlayerResize, this)
  }