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

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/TZyG96KZ1Wgx/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=',
    }
  }
}

การปรับตั้งค่า 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="the-video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('the-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/TZyG96KZ1Wgx/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>