SDK IMA HTML5 hỗ trợ danh sách phát quảng cáo hoàn toàn tự động. Tính năng này chèn các điểm chèn quảng cáo vào nội dung như được chỉ định trong Google Ad Manager khi phân phát quảng cáo. Điều này cũng giúp đơn giản hoá đáng kể mã trình phát video cần thiết để hỗ trợ các điểm chèn quảng cáo, bao gồm cả quảng cáo trước video, trong video và sau video.
- Khi tạo
AdsManager
, đối tượngcontentPlayback
sẽ được truyền vào bằng lệnh gọi getAdsManager. Đối tượng này phải có thuộc tínhcurrentTime
trả về vị trí của đầu phát hiện tại của video. Nếu đang sử dụng phần tửvideo
HTML5 để hiển thị nội dung, bạn chỉ cần truyền phần tử đó đến SDK. Đối tượng này được dùng để theo dõi tiến trình phát nội dung để các điểm chèn quảng cáo được chèn tự động vào thời điểm được chỉ định trong Ad Manager. Bạn cũng cần cho SDK biết rằng bạn muốn SDK thay mặt bạn xử lý trạng thái nội dung.var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- Để đảm bảo quảng cáo sau video được phát, bạn cần cho SDK biết thời điểm nội dung của mình kết thúc. Việc này hơi phức tạp vì trong một số trường hợp, SDK sử dụng trình phát video để phát quảng cáo. Vì vậy, bạn cần đảm bảo rằng bạn chỉ cho SDK biết thời điểm nội dung của mình kết thúc chứ không phải thời điểm quảng cáo kết thúc. Bạn có thể thực hiện việc đó bằng cách sử dụng mã sau:
var videoContent = document.getElementById('contentElement'); var contentEndedListener = function() {adsLoader.contentComplete();}; videoContent.addEventListener('ended', contentEndedListener); function onContentPauseRequested() { contentElement.removeEventListener('ended', contentEndedListener); ... } function onContentResumeRequested() { contentElement.addEventListener('ended', contentEndedListener); ... }
- Các sự kiện
CONTENT_PAUSE_REQUESTED
vàCONTENT_RESUME_REQUESTED
được dùng để tạm dừng và tiếp tục nội dung khi phát điểm chèn quảng cáo. - Nếu trình phát video của bạn hỗ trợ tính năng kéo để tua và thuộc tính thời gian hiện tại của trình phát video cập nhật trong khi người dùng đang kéo, thì SDK không thể phân biệt giữa nội dung đang phát bình thường và người dùng tua qua nội dung.
Bạn phải sử dụng đối tượng contentPlayback tuỳ chỉnh làm tham số cho
getAdsManager
. Để biết ví dụ về trường hợp sử dụng này, hãy xem phần Vấn đề về tính năng tua.
Lưu ý: Khi nội dung phát xong hoặc người dùng đã dừng phát, hãy nhớ gọi AdsLoader.contentComplete để báo cho SDK biết nội dung đã phát xong. Sau đó, SDK sẽ phát khoảng nghỉ quảng cáo sau video, nếu có khoảng nghỉ quảng cáo được lên lịch. Sự kiện ALL_ADS_COMPLETED
được kích hoạt khi TẤT CẢ các điểm chèn quảng cáo đã phát. Ngoài ra, xin lưu ý rằng tính năng theo dõi nội dung bắt đầu khi init()
được gọi và bạn phải luôn gọi init()
trước khi phát nội dung.
Tắt tính năng tự động phát các điểm chèn quảng cáo
Trong một số trường hợp, bạn có thể muốn ngăn SDK phát các khoảng nghỉ quảng cáo cho đến khi bạn sẵn sàng. Trong trường hợp này, bạn có thể tắt tính năng tự động phát các điểm chèn quảng cáo để cho SDK biết thời điểm bạn sẵn sàng phát một điểm chèn quảng cáo. Với cấu hình này, sau khi tải một điểm chèn quảng cáo, SDK sẽ kích hoạt sự kiện AD_BREAK_READY
. Khi trình phát của bạn đã sẵn sàng để bắt đầu khoảng nghỉ quảng cáo, bạn có thể gọi adsManager.start():
function requestAds() {} ... adsLoader.getSettings().setAutoPlayAdBreaks(false); ... } function onAdsManagerLoaded() { ... // For non-auto ad breaks, listen for ad break ready adsManager.addEventListener( google.ima.AdEvent.Type.AD_BREAK_READY, adBreakReadyHandler); ... } function adBreakReadyHandler() { // Once we're ready to play ads. To skip this ad break, simply return // from this handler without calling adsManager.start(). adsManager.start(); }
Dùng thử
Hãy xem mã sau đây để biết cách triển khai hiệu quả.
Vấn đề với tính năng tìm kiếm
Nếu sử dụng quy tắc quảng cáo, bạn có thể gặp sự cố khi tìm kiếm bằng cách nhấp và kéo. Cụ thể, sau khi người dùng nhấp và kéo để tua qua video qua nhiều nhóm quảng cáo giữa video, họ có thể thấy 2 hoặc nhiều nhóm quảng cáo đó phát liên tiếp trước khi nội dung tiếp tục. Điều này là do thời gian của điểm phát video được cập nhật trong khi người dùng đang tua; nếu SDK tình cờ thăm dò ý kiến về thời gian hiện tại trong khi người dùng tua qua một quảng cáo, thì SDK có thể cho rằng quảng cáo đó sẽ được phát. Khi nội dung tiếp tục, nội dung đó sẽ phát quảng cáo đó, sau đó là quảng cáo mới nhất kể từ lần tua. Để xem hình ảnh minh hoạ vấn đề này, hãy xem sơ đồ sau:

Lưu thời gian hiện tại khi người dùng bắt đầu tua và báo cáo thời gian đó khi SDK yêu cầu cho đến khi người dùng tiếp tục phát bình thường. Để xem hình ảnh minh hoạ giải pháp này, hãy xem sơ đồ sau:

Với giải pháp này, bạn sẽ bỏ qua đúng quảng cáo xen kẽ 0:10 và chỉ phát quảng cáo xen kẽ 0:20.
Bạn có thể thực hiện việc này bằng cách sử dụng trình theo dõi đầu phát tuỳ chỉnh trong đoạn mã sau. Mã này chứa các nội dung sửa đổi (hiển thị bằng chữ đậm) của ads.js
trong mẫu HTML5 nâng cao có trên trang tải xuống của chúng tôi.
var Ads = function(application, videoPlayer) { ... this.currentTime = 0; setInterval(this.updateCurrentTime, 1000); }; Ads.prototype.updateCurrentTime = function() { if (!this.videoPlayer_.contentPlayer.seeking) { this.currentTime = this.videoPlayer_.contentPlayer.currentTime; } }; Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) { this.application_.log('Ads loaded.'); this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this); this.processAdsManager_(this.adsManager_); };
Các vấn đề đã biết với Safari dành cho thiết bị di động
Phương thức này sẽ hoạt động trên mọi nền tảng ngoại trừ Safari dành cho thiết bị di động. Trên Safari dành cho thiết bị di động, thuộc tính tua của thẻ video không được triển khai đúng cách (thuộc tính này luôn trả về giá trị false). Để khắc phục vấn đề đó, bạn cần tự kiểm tra xem người dùng có đang tua video hay không. Sau đây là mã mẫu cho phương thức này. Xin nhắc lại, các dòng in đậm là nội dung sửa đổi đối với mã hiện có.
var Ads = function(application, videoPlayer) { ... this.currentTime = 0; setInterval(this.updateCurrentTime, 1000); this.seeking = false; this.seekCheckInterval = 1000; // You may need to adjust this value, depending on your platform this.seekThreshold = 100; this.previousTime = 0; setInterval( Application.bind(this, this.checkForSeeking), this.seekCheckInterval); }; Ads.prototype.updateCurrentTime = function() { if (!this.seeking) { this.currentTime = this.videoPlayer_.contentPlayer.currentTime; } }; Ads.prototype.checkForSeeking = function() { var currentTime = this.videoPlayer_.contentPlayer.currentTime; // How much time has passed since you last ran this method, in milliseconds var diff = (currentTime - this.previousTime) * 1000; // If that difference is greater than the time since you last ran this method, // plus the threshold, the user was seeking if (Math.abs(diff) > this.interval + this.threshold) { this.seeking = true; } else { this.seeking = false; } // Grab the current video time again to make up for time spent in this method previousTime = this.videoPlayer_.contentPlayer.currentTime; }; Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) { this.application_.log('Ads loaded.'); this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this); this.processAdsManager_(this.adsManager_); };
Với những thay đổi này, SDK hiện đang sử dụng thuộc tính currentTime của đối tượng Ads
để xác định thời điểm phát các điểm chèn quảng cáo, chứ không phải thuộc tính currentTime
của trình phát video nội dung.