# การเล่นโฆษณา

ByteArk Player รองรับการแสดงผลโฆษณาโดยใช้ Google Interactive Media Ads SDK (Google IMA SDK for HTML5) (opens new window) ซึ่งเป็นการแสดงผลโฆษณาตามมาตรฐานของ Video Ad Serving Template (VAST) (opens new window)

ByteArk Player แสดงผลโฆษณาโดยการเรียกขอโฆษณาจาก Ads Server ต่างๆ เช่น

  • Google DoubleClick for Publishers (DFP)
  • Google AdSense network
  • Ad Server ตามโฆษณาตามมาตรฐานของ VAST (VAST-compliant ad server)

# รูปแบบโฆษณาที่รองรับ

เนื่องจาก ByteArk Player แสดงผลโฆษณาโดยใช้ Google IMA SDK for HTML5 จึงสามารถตรวจสอบรูปแบบโฆษณาที่รองรับได้จากเอกสาร Support and Compatibility (opens new window) ของ Google

# การแสดงผลโฆษณา


# การเปิดใช้งานการเล่นโฆษณา

การเปิดใช้งานการเล่นโฆษณาบน ByteArk Player สามารถทำได้โดยระบุ plugins.bytearkAds ใน options เมื่อทำการสร้าง video player โดยสามารถตั้งค่าพารามิเตอร์ต่างๆ ตามตาราง options ด้านล่าง

{
  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: {
      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=',
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# การปรับตั้งค่า options

Name Type Required Description
adTagUrl String No URL ของ VAST, VMAP หรือ VPAID
adsResponse String No XML String ของ VAST, VMAP หรือ VPAID
showAdMarker Boolean No แสดงตำแหน่งของโฆษณาบน control bar
ads Array No ลิสของโฆษณาที่ต้องการให้แสดง
ads[].adTagUrl String No URL ของ VAST, VMAP หรือ VPAID
ads[].adsResponse String No XML String ของ VAST, VMAP หรือ VPAID
ads[].time Number|String Yes เวลาที่ต้องการให้แสดงโฆษณา สามารถมีค่าเป็น
  • pre : (string) แสดงโฆษณาแบบ preroll
  • post : (string) แสดงโฆษณาแบบ postroll
  • timecode : (string) แสดงโฆษณาแบบ midroll ตามเวลาที่ตั้ง โดยสามารถระบุเป็น format HH:MM:SS
  • 0 : (number) แสดงโฆษณาแบบ preroll
  • -1 : (number) แสดงโฆษณาแบบ postroll
  • number : (number) แสดงโฆษณาแบบ midroll ตามเวลาที่ตั้ง โดยระบุค่าเป็นวินาทีที่ต้องการให้แสดงโฆษณา เช่น 10 คือแสดง midroll เมื่อเล่นวิดีโอไปถึงวินาทีที่ 10
  • percent: (string) แสดงโฆษณาแบบ midroll ตามเปอร์เซ็นต์ที่ตั้ง เช่น '10%', '50%' โดยระบุค่าเป็นเปอร์เซ็นต์จากความยาวของวิดีโอ (ใช้งานได้เฉพาะ VOD เคุณั้น)
showControlsForJSAds Boolean No แสดงหรือซ่อนแถบควบคุม เมื่อเล่นโฆษณา VPAID แบบ Javascript (ค่าเริ่มต้นคือ true)
contribAds Object No ตั้งค่าสำหรับ videojs-contrib-ads plugin (opens new window)
googleIma Object No ตั้งค่าสำหรับ Google IMA SDK.
googleIma.imaSdkSettings Object No ตั้งค่า properties ของ Google IMA SDK ImaSdkSettings (opens new window)
googleIma.adsRenderingSettings Object No ตั้งค่า properties ของ Google IMA SDK AdRenderingSettings (opens new window)
googleIma.adsRequestSettings Object No ตั้งค่า properties ของ Google IMA SDK AdRequest (opens new window)

Note

หากมีการตั้งค่า adTagUrl พร้อมกับ adsResponse player จะเลือกค่าของ adTagUrl ใช้งาน (override) เสมอ

# Methods

Name Parameters Return Description
player.getAdBlock() - Boolean มีค่าเป็น true เมื่อ plugin ตรวจเจอว่ามีการใช้งาน AdBlock อยู่
player.playAd(adTagUrl) adTagUrl - เล่นโฆษณาจาก adTagUrl ที่ส่งเข้ามาทันที
player.pauseAd() - - หยุดเล่นโฆษณาชั่วคราว
player.skipAd() - - ข้ามการเล่นโฆษณา
player.getAdMetadata() - Object|null Return AdMetada object ของโฆษณาที่กำลังเล่น หรือ null

# Events

Name Payload Description
ads-block - เกิดเมื่อมีการเปิดใช้งาน adBlock อยู่
ads-loader google.ima.AdsLoader (opens new window) เกิดเมื่อ AdsLoader initialized
ads-request google.ima.AdsRequest (opens new window) เกิดเมื่อมีการรีเควส AdsRequest
ads-manager google.ima.AdsManager (opens new window) เกิดเมื่อโหลด AdsManager เสร็จ
ads-load - เกิดเมื่อมีข้อมูลของโฆษณาหลังจากมีการรีเควสโฆษณา (ad request)
ads-error { code: '1000', errorDetailCode: '13000000', fullErrorCode: '1000-13000000', message: 'error message' } เกิดเมื่อมี ad error เกิดขึ้น
ads-click - เกิดเมื่อมีการคลิกบนโฆษณา
ads-impression - เกิดเมื่อโฆษณาถูกนับ impression.
ads-play - เกิดเมื่อมีการกลับมาเล่นโฆษณาอีกครั้งหลังจากหยุดเล่นชั่วคราว
ads-pause - เกิดเมื่อมีการหยุดเล่นโฆษณาชั่วคราว
ads-ad-started - เกิดเมื่อโฆษณาเริ่มเล่น
ads-first-quartile - เกิดเมื่อมีการเล่นโฆษณาเกิด 1 ใน 4 ของความยาวโฆษณา (crosses first quartile)
ads-midpoint - เกิดเมื่อมีการเล่นโฆษณาเกินครึ่งนึงของความยาวโฆษณา (crosses midpoint)
ads-third-quartile - เกิดเมื่อมีการเล่นโฆษณาเกิน 3 ใน 4 ของความยาวโฆษณา (crosses third quartile)
ads-ad-ended - เกิดเมื่อมีการเล่นโฆษณาจนจบ
ads-allpods-completed - เกิดเมื่อมีการเล่นโฆษณาแบบ LINEAR ads จบหมด
ads-skipped - เกิดเมื่อมีการกดข้ามโฆษณา (Skip Ad)
ads-mute - เกิดเมื่อมีการปิดเสียงโฆษณา

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

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