# การแสดงผลวิดีโอด้วย 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 หรือสามารถดูรายละเอียดการตั้งค่าอื่นๆ ที่เกี่ยวกับโฆษณาได้ที่เอกสาร การเล่นโฆษณา ของ ByteArk Player
option อื่นๆ สำหรับเล่นวิดีโอ สามารถดูได้ที่เอกสาร การปรับตั้งค่า Options

โดยมีตัวอย่างโค้ดสำหรับการแสดงผลด้วย 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

← การแสดงผลวิดีโอด้วย iframe การแสดงผลวิดีโอแบบ iframe OutStream →