# การเล่นโฆษณา
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
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 | เวลาที่ต้องการให้แสดงโฆษณา สามารถมีค่าเป็น
|
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
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