# การแสดงผลวิดีโอแบบ HTML/JavaScript กับ OutStream SDK

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

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

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

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

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

1
2
3

เพิ่ม ByteArk Player SDK ที่แท็ก <script> ใน html

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

เพิ่ม ByteArk OutStream SDK ที่แท็ก <script> ใน html

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

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

src : ลิ้งก์ .m3u8 ของวิดีโอ โดยมาจาก Source Link ของแต่ละวิดีโอที่อัพโหลดใน ByteArk Stream
title : ชื่อของวิดีโอ
option ที่เกี่ยวกับโฆษณา : ระบุใน plugins -> bytearkAds -> ads -> adTagUrl หรือสามารถดูรายละเอียดการตั้งค่าอื่นๆ ที่เกี่ยวกับโฆษณาได้ที่เอกสาร การเล่นโฆษณา ของ ByteArk Player
option อื่นๆ สำหรับเล่นวิดีโอ สามารถดูได้ที่เอกสาร การปรับตั้งค่า Options

outstream_html_js

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

เพิ่มโค้ดสำหรับเปิดใช้งาน 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 ByteArk 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	ตำแหน่งเมื่อย่อ html element container ระหว่างที่มีการ scroll หน้าเว็บ สามารถใส่ค่าเป็น `bottom-left` หรือ `bottom-right`
animation	Boolean	true	No	แสดง animation เมื่อย่อ HTML Element 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

← การแสดงผลวิดีโอแบบ iframe กับ OutStream SDK