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 điểm chèn quảng cáo vào nội dung như đã chỉ định trong Google Ad Manager khi quản lý quảng cáo. Công cụ này cũng đơ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
,contentPlayback
được chuyển vào thông qua getAdsManager . Đối tượng này phải có một thuộc tínhcurrentTime
trả về con trỏ vị trí hiện tại của video. Nếu bạn đang sử dụng phần tửvideo
HTML5 để hiển thị nội dung của mình, bạn chỉ cần chuyể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, vì vậy, điểm chèn quảng cáo tự động được chèn vào các thời điểm được chỉ định trong Ad Manager. Bạn cũng cần cho phép 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 phát quảng cáo sau video, bạn cần cho SDK biết thời điểm nội dung của mình
đã hoàn tất. Việc này hơi phức tạp vì trong một số trường hợp, SDK sử dụng video của bạn
trình phát để phát quảng cáo, vì vậy, bạn cần đảm bảo chỉ cho SDK biết khi
nội dung của bạn đã kết thúc chứ không phải khi quảng cáo kết thúc. Bạn có thể làm điều đó bằng cách sử dụng
mã bên dưới:
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); ... }
CONTENT_PAUSE_REQUESTED
vàCONTENT_RESUME_REQUESTED
các sự kiện được dùng để tạm dừng và tiếp tục nội dung khi các điểm chèn quảng cáo được phát.- Nếu trình phát video của bạn hỗ trợ kéo để tìm 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, SDK không thể phân biệt
giữa nội dung tiến triển bình thường và người dùng tìm kiếm thông qua nội dung.
Bạn phải sử dụng đối tượng contentPlayback tuỳ chỉnh làm tham số để
getAdsManager
. Để xem ví dụ về trường hợp sử dụng này, hãy xem bài viết Vấn đề khi tìm kiếm.
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 rằng nội dung đã hoàn tất. Sau đó, SDK này sẽ phát
điểm chèn quảng cáo sau video nếu đã được lên lịch. ALL_ADS_COMPLETED
sự kiện tăng lên khi TẤT CẢ điểm chèn quảng cáo được phát. Ngoài ra, hãy lưu ý
quá trình theo dõi nội dung bắt đầu khi init()
được gọi và bạn nên
luôn gọi init()
trước khi phát nội dung.
Tắt tính năng tự động phát đ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 điểm chèn quảng cáo cho đến khi
bạn đã sẵn sàng cho chúng. Trong trường hợp này, bạn có thể tắt tính năng tự động phát điểm chèn quảng cáo
ưu tiên cho SDK biết khi nào bạn đã sẵn sàng phát điểm chèn quảng cáo. Bằng cách này
thì sau khi SDK tải một điểm chèn quảng cáo, SDK đó sẽ kích hoạt một
Sự kiện AD_BREAK_READY
. Khi trình phát của bạn đã sẵn sàng
cho điểm chèn quảng cáo bắt đầu,
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ử
Bạn có thể xem cách triển khai hiệu quả ở bên dưới.
Khó khăn khi tua
Nếu sử dụng quy tắc quảng cáo, bạn có thể gặp vấn đề khi tìm kiếm bằng cách nhấp và kéo. Cụ thể là sau khi người dùng nhấp và kéo để tìm kiếm qua video qua nhiều video nhóm giữa video, họ có thể thấy 2 hoặc nhiều nhóm đó phát lại trước nội dung tiếp tục. Điều này là do thời gian phát video đang cập nhật trong khi người dùng đang tìm kiếm; liệu SDK có tiến hành thăm dò ý kiến tại thời điểm hiện tại trong khi người dùng sẽ tìm kiếm một quảng cáo, thiết bị có thể nghĩ rằng quảng cáo đó nên được phát. Khi nội dung tiếp tục, Google Play sẽ phát quảng cáo đó và quảng cáo gần đây nhất kể từ khi người dùng tìm kiếm. Đối với mô tả trực quan về vấn đề này, hãy xem sơ đồ bên dưới:
Cách đơn giản để giải quyết vấn đề này là lưu thời gian hiện tại khi người dùng bắt đầu tìm kiếm và báo cáo thời điểm SDK yêu cầu cho đến khi người dùng sẽ tiếp tục phát bình thường. Để có bản trình bày trực quan về giải pháp này, hãy xem sơ đồ dưới đây:
Với giải pháp này, bạn bỏ qua đúng quảng cáo 0:10 giữa video và chỉ phát quảng cáo giữa video 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 con trỏ vị trí tuỳ chỉnh, như minh hoạ dưới đây. Mã bên dưới
chứa nội dung sửa đổi (hiển thị đậm) của ads.js
trong HTML5 nâng cao
mẫu có sẵn trên
trang tải xuống.
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_); };
Sự cố đã 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 thiết bị di động Safari, thuộc tính tìm kiếm của thẻ video không được triển khai đúng cách ( luôn trả về false). Để giải quyết vấn đề đó, bạn cần tự kiểm tra để xem liệu người dùng có đang tìm kiếm xuyên qua video hay không. Mã mẫu cho phương thức này theo dõi. Xin nhắc lại, các dòng in đậm bên dưới là nội dung sửa đổ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 Ads
để xác định thời điểm phát điểm chèn quảng cáo, không phải là thuộc tính currentTime
của
trình phát video nội dung.