# การแสดงผลวิดีโอ

# การแสดงผลวิดีโอด้วยโค้ด iframe

นำโค้ด iframe ของแต่ละวิดีโอที่อยู่ใน ByteArk Stream ไปใช้งานในเว็บไซต์โดยตรง

การนำวิดีโอจาก ByteArk Stream มาใช้งานสามารถทำได้อย่างง่ายดายผ่านโค้ด iframe ซึ่งสามารถนำไปติดตั้งบนเว็บไซต์ได้โดยตรง วิธีนี้มีข้อดีคือความรวดเร็วในการนำวิดีโอไปใช้งาน โดยไม่จำเป็นต้องแก้ไขโค้ดใดๆ เพิ่มเติม ทำให้การทำงานมีลักษณะเหมือนกับการฝังวิดีโอจาก YouTube หรือ DailyMotion อย่างไรก็ตาม วิธีนี้มีข้อจำกัดที่สำคัญ คือไม่สามารถปรับการแสดงผลของแต่ละวิดีโอได้ เนื่องจากทุกวิดีโอที่อยู่ภายใน Project เดียวกันจะมีการตั้งค่า Player ที่เหมือนกันทั้งหมด นอกจากนี้ ยังไม่สามารถใช้ฟีเจอร์ขั้นสูงอื่นๆ ได้ เช่น การปรับแต่งการแสดงผลใน video player หรือการแสดงวิดีโอในรูปแบบ Playlist

# การแสดงผลวิดีโอด้วยโค้ด HTML/JavaScript

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

โหลด JavaScript ของ Video Player
ตั้งค่าการแสดงผล Video Player ด้วย HTML Div และ CSS ที่เหมาะสม
เรียกใช้ Video Player ด้วย JavaScript โดยระบุข้อมูลที่สำคัญดังนี้

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

โดยมีตัวอย่างโค้ดสำหรับการแสดงผลด้วย Video Player ดังนี้

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

← ติดตั้ง Ad Tag ลงในวิดีโอ การตรวจสอบสถิติ →