ByteArk Documentation

# Setup Lighthouse with Video.js Version 7

# How to

  1. Add videojs-byteark-lighthouse plugin to script tag

    <script type="text/javascript" src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/videojs/@latest/videojs-byteark-lighthouse.min.js"></script>
    1
    2

  2. Setup video.js

    <script>
// Video.js Setup Code
var player = videojs('player', {
  sources: [{
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  3. Add poster and other fields to source object

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    Field details

    Name Type Required Description
    videoId String Yes video's id in ByteArk syste
    title String Yes video's name
    subtitle String No episode name or short description of video
    poster String No poster image url that display before play video

  4. To setup Lighthouse plugin you can do either

    4.1 Setup by using video.js's options plugins

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  plugins:{
    bytearkLighthouse: {
      projectId: 'YOUR_PROJECT_ID',
      debug: true,
    },
  },
  // All your remaining Video.js options
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    4.2 Setup a plugin by calling a function

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
// Setup ByteArk Lighthouse plugin
player.bytearkLighthouse({
  projectId: 'YOUR_PROJECT_ID',
  debug: true,
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    Please contact ByteArk team to get Lighthouse's projectId

  5. Open web browser and navigate to page that setup Lighthouse plugin then open Developer console, if below message is appeared on Developer console you're good to go!

    ...
[LighthousePlayerPlugin] Init lighthouse plugin
...
    1
    2
    3

  6. Remove debug: true from plugin's options

# Send metadata to ByteArk Lighthouse

Send metadata to ByteArk Lighthouse by add lighthouse object to sources object

# Supported Metadata

User Metadata

Name Type Required Description
user object No user's metadata object
user.userId String No user's ID
user.age String No user's age
user.country String No user's country
user.city String No user's city
user.lat String No user's latitude
user.long String No user's longitude
user.gender String No user's gender
user.nationality String No user's nationality
user.subscriptionPlan String No user's subscription plan
user.accountCreationDate String No user's account creation date

Video Metadata

Name Type Required Description
video object No video's metadata object
video.videoTitle String No video's title
video.seriesId String No video's series ID
video.seriesTitle String No video's series title
video.season String No video's season
video.episode String No video's episode
video.subEpisode String No video's sub episode
video.duration String No video's duration
video.publishedDate String No video's published date
video.genres String No video's genres
video.rating String No video's rating

Custom metadata

Name Type Required Description
custom object No custom's metadata object
custom.d1 String No first custom metadata
custom.d2 String No second custom metadata
custom.d3 String No third custom metadata
custom.d4 String No fourth custom metadata
custom.d5 String No fifth custom metadata
custom.d6 String No sixth custom metadata
custom.d7 String No sevemth custom metadata
custom.d8 String No eighth custom metadata
custom.d9 String No ninth custom metadata
custom.d10 String No tenth custom metadata

Example of source object for Metadata Sending

...
sources: [{
  title: 'Big Buck Bunny',
  src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyG96KZ1Wgx/playlist.m3u8',
  type: 'application/x-mpegURL',
  videoId: 'QObeO02cMYWl',
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
  lighthouse: {
    user: {
      userId: 'YOUR_USER_ID',
      age: '19',
      gender: 'USER_GENDER',
    },
    video: {
      videoTitle: 'VIDEO_TITLE',
      season: '2',
      episode: '12'
    },
    custom: {
      d1: 'CUSTOM_HEADER_1',
      d2: 'CUSTOM_HEADER_2'
    }
  }
}],
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Example code for setup Lighthouse with Video.js

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ByteArk Lighthouse for Video.js</title>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="player" class="video-js vjs-default-skin" controls playsinline />
  <script type="text/javascript" src="https://vjs.zencdn.net/7.6.6/video.js"></script>
  <script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/videojs/@latest/videojs-byteark-lighthouse.min.js"></script>
  <script>
    var player = videojs('player', {
      autoplay: true,
      fluid: true,
      poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
      sources: [{
        videoId: 'QObeO02cMYWl',
        title: 'Big Buck Bunny',
        subtitle: 'sample video',
        src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
        type: 'application/x-mpegURL',
      }]
      plugins:{
        bytearkLighthouse: {
          projectId: 'YOUR_PROJECT_ID',
          debug: true,
        },
      },
      // All your remaining Video.js options
    })
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

← Video.js and React.js →

Pricing Contact Terms of Service