คู่มือแนะนำการใช้งาน ByteArk

# การแสดงผลแบบ Outstream ด้วย HTML/JavaScript

การแสดงผลแบบ Outstream ด้วย ByteArk Player ร่วมกับ OutStream SDK ช่วยให้นักพัฒนาปรับแต่งการแสดงผลของแต่ละตำแหน่งได้ด้วยรูปแบบและฟีเจอร์ที่ต้องการ โดยมีขั้นตอนดังนี้

# 1. เพิ่ม container สำหรับ Outstream

เพิ่มแท็ก <div> ในจุดที่ต้องการแสดงผลวิดีโอแบบ Outstream พร้อมระบุแอตทริบิวต์ id ซึ่งจะใช้อ้างอิงในขั้นตอนถัดไป

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

# 2. เพิ่มแท็กสำหรับ Video Player

เพิ่มแท็ก <div> สำหรับแสดงผล Video Player พร้อมระบุแอตทริบิวต์ id โดยให้อยู่ภายในแท็ก <div> จากขั้นตอนที่ 1

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

# 3. เพิ่ม ByteArk Player SDK

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

# 4. เพิ่ม ByteArk OutStream SDK

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

# 5. เปิดใช้งาน Video Player

เพิ่มโค้ดเพื่อเปิดใช้งาน Video Player โดยอ้างอิง id ของ <div> ในขั้นตอนที่ 2 พร้อมระบุข้อมูลสำคัญดังนี้

ตัวอย่างการแสดงผลวิดีโอแบบ Outstream ด้วย 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. เปิดใช้งาน OutStream SDK

เพิ่มโค้ดเพื่อเปิดใช้งาน OutStream SDK โดยระบุ elementId เป็น id ของ <div> ในขั้นตอนที่ 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

# การปรับตั้งค่า Options ของ OutStream SDK

Name Type Default Required Description
elementId String - Yes ID ของ HTML Element container
contentUrl String - No URL ของ iframe video player จาก ByteArk Stream
position String bottom-right No ตำแหน่งเมื่อย่อ container ระหว่างเลื่อนหน้าเว็บ ระบุเป็น bottom-left หรือ bottom-right
animation Boolean true No แสดง animation เมื่อย่อ container

# ตัวอย่างซอร์สโค้ด

<!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

←

Pricing Contact Terms of Service