# Instream via HTML/JavaScript

Displaying video with HTML and JavaScript using ByteArk Player lets developers customize each placement with the layout and features they want. The steps are as follows.

# 1. Add an element for the Video Player

Add a <div> tag with an id attribute for the Video Player.

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

# 2. Add the ByteArk Player SDK

Add the ByteArk Player SDK in a <script> tag in your HTML.

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

# 3. Initialize the Video Player

Add code to initialize the Video Player, referencing the id of the <div> from step 1, 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 video display via HTML/JavaScript

# Example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      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
            }]
          }
        }
      });
    </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

← Instream via iframe Outstream via iframe →