Diagnal web player

The internal Diagnal web player

install

npm i diagnal-web-player

using as submodule

go to the directory where you want to use this module e.g player and run the following command

git submodule add https://github.com/diagnal/diagnal-webplayer

Basic Example

somewhere in your HTML file

<div id="dplayer" />

import DPlayer from 'diagnal-web-player'
import Bitmovin from 'diagnal-web-player/lib/players/Bitmovin'
import BitmovinEvents from 'diagnal-web-player/lib/players/Bitmovin/BitmovinEvents'
// helpers
import { log } from 'diagnal-web-player/lib/utils/common'
import { on } from 'diagnal-web-player/lib/utils/dom'
import basicPlugin from './plugins/basic'

// register events
const events = {
  [BitmovinEvents.timechanged]: (data) => {
    log('time updated', data)
  },
}

// config for core and wrapper player
const playerConfig = {
  events,
  plugins: [basicPlugin],
  wrapperEvents: BitmovinEvents,
  profile: true,
  bitmovinConfig: {
    sdkUrl: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js',
    playerConfig: {
      key: process.env.BITMOVIN_API_KEY,
      ui: false,
      style: {
        aspectratio: '2:1',
      },
      tweaks: {
        file_protocol: true,
        app_id: process.env.APP_ID,
      },
      playback: {
        autoplay: true,
      },
    },

    sourceConfig: {
      title: 'Default Demo Source Config',
      description: 'Select another example in "Step 4 - Load a Source" to test it here',
      dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
      hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
      smooth:
        'https://test.playready.microsoft.com/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/manifest',
      progressive:
        'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
      poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
    },
  },
}

// create the player
const player = DPlayer.createPlayer(Bitmovin, playerConfig)

// use the player api
global.onload = () => {
  on('#play:click', () => player.play())
  on('#pause:click', () => player.pause())
}

submodule import example

import DPlayer from './diagnal-webplayer/src/core/DPlayer'
import Bitmovin from './diagnal-webplayer/src/players/Bitmovin'
import BitmovinEvents from './diagnal-webplayer/src/players/Bitmovin/BitmovinEvents'
import { log } from './diagnal-webplayer/src/utils/common'