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

การแสดงผลวิดีโอแบบ iframe กับ OutStream SDK สามารถทำได้โดย

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

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

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

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

เพิ่มโค้ดสำหรับเปิดใช้งาน OutStream SDK กับแท็ก <div> ที่ได้สร้างไว้ในข้อ 1. และระบุ contentUrl ที่ต้องการจะใช้เล่น โดย contentUrl สามารถหาได้จากหน้า video detail บน ByteArk Stream ในหัวข้อ Video Link

<script>
  var sdk = new window.ByteArkOutStreamSDK({
    elementId: 'outstream-container', // ID of the element to make float (required)
    contentUrl: 'https://stream-player.byteark.com/players/614d5df44a9a7e00b4dc3eb6/videos/U686mpQ72zCw', // URL for iframe src
    // position: 'bottom-left', // 'bottom-left' or 'bottom-right' (default: 'bottom-right')
    // animation: true, // Enable smooth transitions (default: true)
  });
</script>

1
2
3
4
5
6
7
8

Video Link

# การปรับตั้งค่า 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 -->
    <div id="outstream-container"></div>
    <!-- include ByteArk OutStream SDK -->
    <script src="https://byteark-sdk.cdn.byteark.com/outstream/@latest/byteark-outstream-sdk.min.js"></script>
    <script>
      // init ByteArk OutStream SDK
      var sdk = new window.ByteArkOutStreamSDK({
        elementId: 'outstream-container', // ID of the element to make float (required)
        contentUrl: 'https://stream-player.byteark.com/players/614d5df44a9a7e00b4dc3eb6/videos/U686mpQ72zCw', // URL for iframe src
        // 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

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