# Outstream via HTML/JavaScript

Displaying video in Outstream mode with ByteArk Player together with the OutStream SDK lets developers customize each placement with the layout and features they want. The steps are as follows.

# 1. Add an Outstream container

Add a <div> tag where you want the Outstream video to appear, with an id attribute that will be referenced in the next steps.

<div id="outstream-container"></div>

# 2. Add an element for the Video Player

Add a <div> tag with an id attribute for the Video Player, placed inside the <div> from step 1.

<div id="outstream-container">
  <div id="video-player"></div>
</div>

1
2
3

# 3. Add the ByteArk Player SDK

<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>

# 4. Add the ByteArk OutStream SDK

<script src="https://byteark-sdk.cdn.byteark.com/outstream/@latest/byteark-outstream-sdk.min.js"></script>

# 5. Initialize the Video Player

Add code to initialize the Video Player, referencing the id of the <div> from step 2, and specify the key information below:

src: the video's .m3u8 link, from the Source Link of each video uploaded to ByteArk Stream
title: the video title
Ad options: set in plugins → bytearkAds → ads → adTagUrl; see Advertising in ByteArk Player
Other options: see Player Options

Example of Outstream video display via HTML/JavaScript

var player = bytearkPlayer('video-player', {
  fluid: true,
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
  sources: [{
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkAds: {
      ads: [{
        adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
        time: 'pre'
      }]
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 6. Initialize the OutStream SDK

Add code to initialize the OutStream SDK, referencing the id of the <div> from step 1.

var sdk = new window.ByteArkOutStreamSDK({
  elementId: 'outstream-container', // ID of the element to make float (required)
  // position: 'bottom-left', // 'bottom-left' or 'bottom-right' (default: 'bottom-right')
  // animation: true, // Enable smooth transitions (default: true)
});

1
2
3
4
5

# OutStream SDK options

Name	Type	Default	Required	Description
`elementId`	String	-	Yes	ID of the HTML element container
`contentUrl`	String	-	No	URL of the iframe video player from ByteArk Stream
`position`	String	`bottom-right`	No	Position when the container minimizes while scrolling. One of `bottom-left` or `bottom-right`
`animation`	Boolean	`true`	No	Show an animation when the container minimizes

# Example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- Create an outstream container div with video player div inside -->
    <div id="outstream-container">
      <div id="video-player"></div>
    </div>
    <!-- include ByteArk Player SDK -->
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <!-- include ByteArk OutStream SDK -->
    <script src="https://byteark-sdk.cdn.byteark.com/outstream/@latest/byteark-outstream-sdk.min.js"></script>
    <script>
      // init ByteArk Player with configuration
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL'
        }],
        plugins: {
          bytearkAds: {
            ads: [{
              adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
              time: 'pre'
            }, {
              adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=',
              time: 10
            }]
          }
        }
      });
      // init ByteArk OutStream SDK
      var sdk = new window.ByteArkOutStreamSDK({
        elementId: 'outstream-container', // ID of the element to make float (required)
        // position: 'bottom-left', // 'bottom-left' or 'bottom-right' (default: 'bottom-right')
        // animation: true, // Enable smooth transitions (default: true)
      });
    </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
40
41
42
43
44
45
46
47

← Outstream via iframe