SDK IMA giúp bạn dễ dàng tích hợp quảng cáo đa phương tiện vào trang web và ứng dụng của mình. SDK IMA có thể yêu cầu quảng cáo từ bất kỳ máy chủ quảng cáo nào tuân thủ VAST và quản lý việc phát quảng cáo trong ứng dụng của bạn. Với SDK IMA DAI, ứng dụng sẽ tạo một yêu cầu truyền phát cho quảng cáo và video nội dung – VOD hoặc nội dung trực tiếp. Sau đó, SDK sẽ trả về một luồng video kết hợp để bạn không phải quản lý việc chuyển đổi giữa quảng cáo và video nội dung trong ứng dụng.
Chọn giải pháp DAI mà bạn quan tâm
Phát trực tiếp trên YouTube được đăng ký bằng API Công cụ kết hợp video trên đám mây của Google
Hướng dẫn này minh hoạ cách sử dụng SDK IMA DAI cho HTML5 để yêu cầu và phát trực tiếp một sự kiện được đăng ký bằng API Google Cloud Video Stitcher, cũng như cách chèn khoảng nghỉ quảng cáo trong khi phát.
Hướng dẫn này mở rộng ví dụ cơ bản trong Hướng dẫn bắt đầu về IMA DAI.
Để biết thông tin về cách tích hợp với các nền tảng khác hoặc cách sử dụng SDK phía máy khách IMA, hãy xem bài viết SDK quảng cáo trên phương tiện truyền thông tương tác.
Để xem hoặc làm theo một mẫu tích hợp đã hoàn tất, hãy tải ví dụ về trình nối video trên đám mây xuống cho HLS hoặc DASH.
Thiết lập dự án trên Google Cloud
Thiết lập dự án trên Google Cloud và định cấu hình tài khoản dịch vụ để truy cập vào dự án.
Tạo cấu hình cho sự kiện phát trực tiếp bằng sự kiện phát trực tiếp nội dung của riêng bạn hoặc sự kiện phát trực tiếp thử nghiệm. Hướng dẫn này yêu cầu một luồng HLS.
Nhập các biến sau để sử dụng trong SDK IMA:- Vị trí
- Khu vực Google Cloud nơi bạn tạo cấu hình trực tiếp:
LOCATION - Số hiệu dự án
- Số dự án Google Cloud sử dụng API Video Stitcher:
PROJECT_NUMBER - Mã thông báo OAuth
Mã thông báo OAuth có thời hạn ngắn của tài khoản dịch vụ với vai trò người dùng Video Stitcher:
OAUTH_TOKEN
Đọc thêm về cách tạo thông tin xác thực có thời hạn ngắn cho tài khoản dịch vụ. Bạn có thể sử dụng lại mã thông báo OAuth trên nhiều yêu cầu, miễn là mã thông báo đó chưa hết hạn.
- Mã mạng
Mã mạng Ad Manager để yêu cầu quảng cáo:
NETWORK_CODE
- Mã cấu hình sự kiện phát trực tiếp
- Mã cấu hình trực tiếp mà bạn đã chỉ định khi tạo sự kiện phát trực tiếp:
LIVE_CONFIG_ID - Khoá thành phần tuỳ chỉnh
- Khoá thành phần tuỳ chỉnh của Ad Manager được tạo trong quá trình tạo cấu hình cho sự kiện phát trực tiếp bằng Video Stitcher API:
CUSTOM_ASSET_KEY
Định cấu hình môi trường phát triển
Các ứng dụng mẫu IMA chỉ minh hoạ các yêu cầu phát trực tuyến HLS. Bạn vẫn có thể sử dụng luồng DASH khi tạo lớp VideoStitcherLiveStreamRequest. Khi thiết lập trình phát tương thích với DASH, bạn cần thiết lập trình nghe cho các sự kiện tiến trình của trình phát video. Các sự kiện này có thể cung cấp siêu dữ liệu của video cho StreamManager.processMetadata().
Hàm này có 3 tham số:
type: Một chuỗi phải được đặt thành'ID3'đối với luồng HLS và'urn:google:dai:2018'đối với luồng DASH.data: Đối với thông báo sự kiện DASH, đây là chuỗi dữ liệu thông báo.timestamp: Một số là thời gian bắt đầu thông báo sự kiện cho luồng DASH.
Gửi siêu dữ liệu càng sớm và càng thường xuyên càng tốt khi sự kiện của người chơi có thể cung cấp. Nếu siêu dữ liệu bị thiếu hoặc không chính xác, SDK IMA DAI có thể không kích hoạt sự kiện quảng cáo, dẫn đến sự kiện quảng cáo được báo cáo không chính xác.
Tải ví dụ về IMA DAI cho HTML5 xuống và trích xuất mẫu HLS.js Đơn giản vào một thư mục mới. Ví dụ này là một ứng dụng web mà bạn có thể lưu trữ cục bộ cho mục đích kiểm thử.
Để lưu trữ ví dụ trên máy, hãy chuyển đến thư mục mới rồi chạy lệnh python sau để khởi động máy chủ web:
python3 -m http.server 8000
http.server chỉ có trong Python 3.x. Bạn có thể sử dụng bất kỳ máy chủ web nào khác, chẳng hạn như Apache HTTP Server hoặc Node JS.
Mở trình duyệt web và chuyển đến localhost:8000 để xem trình phát video.
Trình duyệt của bạn phải hỗ trợ thư viện HLS.js.
Nếu mọi thứ hoạt động đúng cách, thì sau một quảng cáo ngắn, bạn có thể nhấp vào nút phát trên trình phát video để bắt đầu xem phim ngắn "Tears of Steel". Nội dung này được phân phối bằng luồng video theo yêu cầu (VOD).
Yêu cầu tổ chức sự kiện phát trực tiếp
Để thay thế luồng VOD mẫu bằng luồng phát trực tiếp, hãy sử dụng lớp VideoStitcherLiveStreamRequest. Lớp này sẽ tự động tạo một phiên quảng cáo bằng Google Ad Manager. Bạn có thể sử dụng giao diện người dùng Google Ad Manager để tìm các phiên DAI đã tạo nhằm theo dõi và gỡ lỗi.
Trong mẫu hiện có, có các hàm để yêu cầu luồng VOD hoặc luồng phát trực tiếp. Để API này hoạt động với API Google Cloud Video Stitcher, bạn cần thêm một hàm mới để trả về đối tượng VideoStitcherLiveStreamRequest.
Ví dụ:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
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);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we 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);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Để kiểm thử cục bộ, nếu các tệp phát trực tiếp nằm trong bộ chứa Google Storage, thì bạn cần bật CORS cho nguồn gốc http://localhost:8000.
Tải lại trang. Sau đó, bạn có thể yêu cầu và phát các sự kiện phát trực tiếp tuỳ chỉnh.
(Không bắt buộc) Thêm các tuỳ chọn cho phiên phát trực tuyến
Tuỳ chỉnh yêu cầu truyền trực tuyến bằng cách thêm các tuỳ chọn phiên để ghi đè cấu hình API Trình ghép nối video trên đám mây mặc định bằng cách sử dụng VideoStitcherLiveStreamRequest.videoStitcherSessionOptions.
Nếu bạn cung cấp một tuỳ chọn không được nhận dạng, API Trình ghép nối video trên đám mây sẽ phản hồi bằng lỗi HTTP 400. Hãy tham khảo hướng dẫn khắc phục sự cố để được hỗ trợ.
Ví dụ: bạn có thể ghi đè các tuỳ chọn tệp kê khai bằng đoạn mã sau đây. Đoạn mã này yêu cầu hai tệp kê khai luồng có các bản trình bày được sắp xếp từ tốc độ bit thấp nhất đến cao nhất.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Chèn điểm chèn quảng cáo
API Google Cloud Video Stitcher chèn quảng cáo được truy xuất từ thẻ quảng cáo cho mỗi điểm chèn quảng cáo. Điểm chèn quảng cáo được biểu thị trong tệp kê khai bằng các điểm đánh dấu quảng cáo. Điểm đánh dấu quảng cáo được chèn bằng bộ mã hoá sự kiện phát trực tiếp.
Nếu đang sử dụng sự kiện phát trực tiếp của riêng mình, bạn cần chèn điểm đánh dấu quảng cáo. Để biết thêm thông tin về các điểm đánh dấu quảng cáo HLS và DASH được hỗ trợ, hãy xem tài liệu về điểm đánh dấu quảng cáo.
Nếu bạn đã tạo sự kiện phát trực tiếp bằng API phát trực tiếp trên Google Cloud, hãy chèn sự kiện kênh chèn quảng cáo.
Quảng cáo sẽ phát ngay sau khi chèn điểm chèn quảng cáo.
Dọn dẹp
Giờ đây, bạn đã lưu trữ thành công một luồng phát trực tiếp bằng API Google Cloud Video Stitcher và yêu cầu luồng phát trực tiếp đó bằng SDK IMA DAI cho HTML5. Điều quan trọng là bạn phải dọn dẹp mọi tài nguyên phân phát.
Hãy làm theo hướng dẫn dọn dẹp sự kiện phát trực tiếp để xoá mọi tài nguyên và thành phần không cần thiết.
Cuối cùng, trong cửa sổ dòng lệnh mà bạn đã khởi động máy chủ web Python 3, hãy sử dụng lệnh ctrl+C để kết thúc máy chủ cục bộ.