# Setup Lighthouse with JWPlayer Version 8.x

# How to

Add lighthouse-jwplayer-plugin to script tag

<script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/jwplayer/@latest/lighthouse-jwplayer-plugin.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/AbnQ478C.js"></script>

1
2

Setup JWPlayer and wrap video source url with ByteArkLighthouse.createMediaUrl function

<script>
// JWPlayer Setup Code
var player = jwplayer('video-player').setup({
  playlist: [
    {
      file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
    },
  ],
  // All your remaining JWPlayer options
})
</script>

1
2
3
4
5
6
7
8
9
10
11

Add callback onXhrOpen to JWPlayer's configuration and call injectXhr from ByteArkLighthouse to collect video stat

{
  file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
  onXhrOpen: function(xhr, url) {
    window.ByteArkLighthouse.injectXhr(xhr, url)
  },
},

1
2
3
4
5
6

Add field bytearkLighthouse to JWPlayer's source object so that Lighthouse can collect video's detail

{
  file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
  onXhrOpen: function(xhr, url) {
    window.ByteArkLighthouse.injectXhr(xhr, url)
  },
  bytearkLighthouse: {
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    coverImageUrl: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  },
},

1
2
3
4
5
6
7
8
9
10
11
12

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
coverImageUrl	String	No	cover image url that display before play video

Add code to setup Lighthouse after setup JWPlayer
- player JWPlayer instance that you can get from 2.
- options Lighthouse's options
  - projectId project ID that you get from ByteArk, if not please contact ByteArk team
```
<script>
window.ByteArkLighthouse.init(player, {
  projectId: 'YOUR_PROJECT_ID',
  debug: true,
})
</script>
```
1
2
3
4
5
6
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!
```
...
[LighthouseJWPlayerPlugin] Init lighthouse jwplayer plugin
...
```
1
2
3
Remove debug: true from plugin's options

# Example code for setup Lighthouse with JWPlayer

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ByteArk Lighthouse for JWPlayer</title>
</head>
<body>
  <div id="video-player"></div>
  <script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/jwplayer/@latest/lighthouse-jwplayer-plugin.js"></script>
  <script type="text/javascript" src="https://content.jwplatform.com/libraries/AbnQ478C.js"></script>
  <script>
    var player = jwplayer('video-player').setup({
      playlist: [
        {
          file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
          onXhrOpen: function(xhr, url) {
            window.ByteArkLighthouse.injectXhr(xhr, url)
          },
          bytearkLighthouse: {
            videoId: 'QObeO02cMYWl',
            title: 'Big Buck Bunny',
            subtitle: 'sample video',
            coverImageUrl: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
          },
        },
      ],
      hlshtml: true,
      autostart: true,
      width: '640',
      aspectratio: '16:9',
      allowfullscreen: true
    })
    window.ByteArkLighthouse.init(player, {
      projectId: 'YOUR_PROJECT_ID'
    })
  </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
36
37
38
39

← ByteArk Player Video.js →