IMA SDK ช่วยให้การผสานรวมโฆษณามัลติมีเดียในเว็บไซต์และแอปของคุณทำได้โดยง่าย IMA SDK สามารถ ส่งคำขอโฆษณาจาก เซิร์ฟเวอร์โฆษณาที่ปฏิบัติตามข้อกำหนดของ VAST และจัดการการเล่นโฆษณาในแอปของคุณ ด้วย IMA DAI SDK แอปจะสร้าง คำขอสตรีมสำหรับโฆษณาและวิดีโอเนื้อหา ไม่ว่าจะเป็น VOD หรือเนื้อหาสด จากนั้น SDK จะแสดงผลลัพธ์ สตรีมวิดีโอแบบรวม คุณจึงไม่ต้องคอยจัดการสลับเปลี่ยนระหว่างโฆษณากับเนื้อหาวิดีโอ ภายในแอป
เลือกโซลูชัน DAI ที่คุณสนใจ
DAI บริการเต็มรูปแบบ
คู่มือนี้สาธิตวิธีผสานรวม IMA DAI SDK เข้ากับวิดีโอง่ายๆ แอปโปรแกรมเล่น หากคุณต้องการดูหรือติดตามไปพร้อมกับตัวอย่างที่สมบูรณ์ การผสานรวม ให้ดาวน์โหลด ตัวอย่างง่ายๆ จาก GitHub
ภาพรวม IMA DAI
การติดตั้งใช้งาน IMA DAI SDK เกี่ยวข้องกับองค์ประกอบหลัก 2 อย่างดังที่แสดงใน คู่มือนี้:
StreamRequest
—VODStreamRequest
หรือLiveStreamRequest
: ออบเจ็กต์ที่กำหนดคำขอสตรีม คำขอสตรีมจะเป็นวิดีโอออนดีมานด์หรือแบบสดก็ได้ สตรีม คำขอระบุรหัสเนื้อหา รวมทั้งคีย์ API หรือโทเค็นการตรวจสอบสิทธิ์ และอื่นๆ พารามิเตอร์StreamManager
: ออบเจ็กต์ที่จัดการสตรีมการแทรกโฆษณาแบบไดนามิกและการโต้ตอบกับแบ็กเอนด์ DAI เครื่องมือจัดการสตรีมยังจัดการคําสั่ง ping ในการติดตาม รวมถึงส่งต่อเหตุการณ์ของสตรีมและโฆษณาไปยัง ผู้เผยแพร่โฆษณา
ข้อกำหนดเบื้องต้น
- ไฟล์ว่าง 3 ไฟล์
- dai.html
- dai.css
- dai.js
- Python ที่ติดตั้งในคอมพิวเตอร์ หรือเว็บเซิร์ฟเวอร์ที่จะใช้ทดสอบ
เริ่มเซิร์ฟเวอร์การพัฒนา
เนื่องจาก IMA DAI SDK โหลดทรัพยากร Dependency โดยใช้โปรโตคอลเดียวกับหน้าเว็บ จากแอปที่โหลด คุณจำเป็นต้องใช้เว็บเซิร์ฟเวอร์เพื่อทดสอบแอปของคุณ ต วิธีที่รวดเร็วในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาซอฟต์แวร์ภายในคือการใช้ Python เซิร์ฟเวอร์
ใช้บรรทัดคำสั่งจากไดเรกทอรีที่มีไฟล์
index.html
เรียกใช้:python -m http.server 8000
ไปที่
http://localhost:8000/
ในเว็บเบราว์เซอร์คุณยังใช้เว็บเซิร์ฟเวอร์อื่นๆ ได้ เช่น Apache HTTP เซิร์ฟเวอร์
สร้างวิดีโอเพลเยอร์ง่ายๆ
ขั้นแรก ให้แก้ไข dai.html เพื่อสร้างเอลิเมนต์วิดีโอ HTML5 อย่างง่ายและ div สำหรับ
ที่ใช้สำหรับการคลิกผ่าน และเพิ่มแท็กที่จําเป็นเพื่อโหลด dai.css
และ dai.js รวมทั้งนำเข้าโปรแกรมเล่นวิดีโอ hls.js
จากนั้นให้ทำดังนี้
แก้ไข dai.css เพื่อระบุขนาดและตำแหน่งขององค์ประกอบในหน้า
สุดท้ายใน dai.js ให้กำหนดตัวแปรเพื่อเก็บคำขอสตรีม
และฟังก์ชัน initPlayer()
ที่จะเรียกใช้เมื่อโหลดหน้าเว็บ
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
โหลด IMA DAI SDK
จากนั้นเพิ่มเฟรมเวิร์ก IMA โดยใช้แท็กสคริปต์ใน dai.html ก่อนแท็ก สำหรับ dai.js
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
เริ่มต้น StreamManager และส่งคำขอสตรีม
หากต้องการขอชุดโฆษณา ให้สร้าง ima.dai.api.StreamManager
มีหน้าที่ในการขอและจัดการสตรีม DAI เครื่องมือสร้างใช้เวลา
และอินสแตนซ์ที่เป็นผลลัพธ์จะนำองค์ประกอบ UI โฆษณามาจัดการกับโฆษณา
คลิก
จากนั้นกำหนดฟังก์ชันที่จะขอสตรีม ตัวอย่างนี้มีฟังก์ชันสำหรับ
ทั้ง VOD และสตรีมแบบสด ซึ่งสร้างอินสแตนซ์ของ VODStreamRequest
และ
LiveStreamRequest
ตามลำดับ แล้วจึงเรียกใช้ streamManager.requestStream()
ด้วยพารามิเตอร์ streamRequest
สำหรับสตรีมแบบสด คุณต้องเพิ่ม
ตัวแฮนเดิลเพื่อฟังเหตุการณ์ข้อมูลเมตาตามกำหนดเวลา และส่งต่อเหตุการณ์ไปยัง
StreamManager
คุณสามารถแสดงความคิดเห็นหรือยกเลิกการใส่ความคิดเห็นโค้ดที่เหมาะกับกรณีการใช้งานได้
ทั้ง 2 วิธีจะใช้คีย์ API ที่ไม่บังคับ หากใช้สตรีมที่มีการป้องกัน คุณจะ
จำเป็นต้อง
สร้างคีย์การตรวจสอบสิทธิ์ DAI
สตรีมในตัวอย่างนี้ไม่มีการป้องกัน จึงไม่ใช้ apiKey
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// Uncomment the line below and comment out the one above to request a
// LIVE stream instead of a VOD stream.
//requestLiveStream(TEST_ASSET_KEY, null);
}
function requestVODStream(cmsId, videoId, apiKey) {
var streamRequest = new google.ima.dai.api.VODStreamRequest();
streamRequest.contentSourceId = cmsId;
streamRequest.videoId = videoId;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
function requestLiveStream(assetKey, apiKey) {
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = assetKey;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
จัดการเหตุการณ์สตรีม
ขั้นตอนสุดท้าย คุณต้องใช้ Listener เหตุการณ์สำหรับเหตุการณ์วิดีโอที่สำคัญ ช่วงเวลานี้
ตัวอย่างง่ายๆ จะจัดการกับ LOADED
, ERROR
, AD_BREAK_STARTED
และ
AD_BREAK_ENDED
เหตุการณ์โดยเรียกใช้ฟังก์ชัน onStreamEvent()
ฟังก์ชันนี้
จัดการการโหลดสตรีมและข้อผิดพลาด รวมถึงการปิดใช้ตัวควบคุมวิดีโอเพลเยอร์
ขณะที่โฆษณากำลังเล่น ซึ่ง SDK จำเป็นต้องใช้ เมื่อสตรีมกำลัง
ที่โหลด วิดีโอเพลเยอร์จะโหลดและเล่น URL ที่ระบุโดยใช้ loadUrl()
คุณอาจต้องตั้งค่า Listener เหตุการณ์สำหรับ pause
ขององค์ประกอบวิดีโอด้วย
และ start
เหตุการณ์เพื่ออนุญาตให้ผู้ใช้เล่นต่อเมื่อ IMA หยุดชั่วคราว
ระหว่างช่วงพักโฆษณา
หากต้องการทำงานกับ DAI โปรแกรมเล่นแบบกำหนดเองของคุณต้องส่งผ่านเหตุการณ์ ID3 สำหรับสตรีมแบบสด เข้ากับ IMA DAI SDK ตามที่ปรากฏในโค้ดตัวอย่าง
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
เท่านี้ก็เรียบร้อย คุณกำลังขอและแสดงโฆษณาด้วย IMA DAI SDK ถึง เรียนรู้เกี่ยวกับฟีเจอร์ขั้นสูงของ SDK โปรดดูคู่มืออื่นๆ หรือ ตัวอย่างใน GitHub