Bắt đầu sử dụng IMA SDK cho DAI

Chọn nền tảng: HTML5 Android iOS tvOS Cast Roku

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, các ứng dụng sẽ gửi yêu cầu về luồng cho quảng cáo và video nội dung (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 bạn muốn:

• Thiết lập bằng tính năng DAI dịch vụ đầy đủ: Google Ad Manager chọn và ghép quảng cáo trực tiếp vào luồng nội dung của bạn.
• Thiết lập bằng tính năng Chèn quảng cáo động (DAI) phân phát nhóm quảng cáo: Google Ad Manager cung cấp các nhóm quảng cáo có thể ghép hoặc tải vào trình phát video.

API ghép nối đám mây cho sự kiện phát trực tiếp API ghép nối đám mây cho video theo yêu cầu

Phát sự kiện phát trực tiếp đã đăng ký với API Google Cloud Video Stitcher

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 một sự kiện phát trực tiếp cho một sự kiện đã đăng ký với API Trình ghép video của Google Cloud, cũng như cách chèn điểm chèn 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 sử dụng cho 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 của 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 quy trình tích hợp mẫu hoàn chỉnh, hãy tải ví dụ về Trình ghép video trên đám mây cho HLS hoặc DASH xuống.

Lưu ý: SDK IMA DAI cho HTML5 hỗ trợ cả luồng HLS và DASH, nhưng để phát mỗi luồng, bạn cần có một trình phát nội dung nghe nhìn hoặc tiện ích khác nhau, chẳng hạn như HLS.js hoặc DASH.js, với nhiều cách triển khai.

Hướng dẫn này giải thích cách định cấu hình HLS.js và SDK IMA DAI để phát luồng HLS, kèm theo các lưu ý quan trọng về sự khác biệt trong cách triển khai cho DASH.

Hãy xem ứng dụng mẫu IMA DASH.js để biết điểm bắt đầu triển khai luồng DAI DASH bằng IMA.

Thiết lập dự án trên đám mây của Google

Thiết lập dự án trên đám mây của 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 cách sử dụ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:

Thông tin vị trí

Khu vực Google Cloud nơi cấu hình phát trực tiếp của bạn được tạo: LOCATION

Số hiệu dự án

Số dự án trên Google Cloud sử dụng Video Stitcher API: PROJECT_NUMBER

Mã thông báo OAuth

Mã thông báo OAuth ngắn hạn của tài khoản dịch vụ có vai trò người dùng Video Stitcher:

OAUTH_TOKEN

Tìm hiểu thêm về cách tạo thông tin xác thực ngắn hạn cho tài khoản dịch vụ. Bạn có thể sử dụng lại mã thông báo OAuth cho 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 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 một sự kiện phát trực tiếp bằng Video Stitcher API: CUSTOM_ASSET_KEY

Thiết lập môi trường phát triển

Lưu ý quan trọng: Lớp VideoStitcherLiveStreamRequest của IMA DAI hỗ trợ cả luồng HLS và luồng DASH nhiều giai đoạn. Điểm chèn quảng cáo chỉ được chèn giữa các khoảng thời gian DASH.

Ứng dụng mẫu IMA chỉ minh hoạ các yêu cầu về luồng 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ó thể cung cấp siêu dữ liệu của video cho StreamManager.processMetadata(). Hàm này có 3 tham số:

1. type: Một chuỗi phải được đặt thành 'ID3' cho luồng HLS và 'urn:google:dai:2018' cho luồng DASH.

2. data: Đối với thông báo sự kiện DASH, đây là chuỗi dữ liệu thông báo.

3. 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 ngay khi có thể và thường xuyên nhất có thể theo các sự kiện của trình phát. Nếu thiếu siêu dữ liệu hoặc siêu dữ liệu không chính xác, thì SDK IMA DAI có thể không kích hoạt các sự kiện quảng cáo, dẫn đến việc báo cáo không đúng cách về các sự kiện quảng cáo.

Tải ví dụ về IMA DAI cho HTML5 xuống rồi giải nén mẫu HLS.js Simple 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 thử nghiệm.

Để lưu trữ ví dụ trên máy, hãy chuyển đến thư mục mới và 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ư Máy chủ HTTP Apache 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 bình thường, thì khi bạn nhấp vào nút phát trên trình phát video, phim ngắn "Tears of Steel" sẽ bắt đầu sau một quảng cáo ngắn. 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 phát trực tiếp

Để thay thế luồng VOD mẫu bằng sự kiện phát trực tiếp, hãy sử dụng lớp VideoStitcherLiveStreamRequest tự động tạo 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 của 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 sự kiện 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);
}

Để thử nghiệm cục bộ, nếu các tệp sự kiện phát trực tiếp nằm trong một bộ chứa Cloud 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 lựa chọn cho phiên truyền trực tuyến

Tuỳ chỉnh yêu cầu về luồng phát bằng cách thêm các lựa chọn về phiên để ghi đè cấu hình mặc định của Cloud Video Stitcher API bằng cách sử dụng VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Nếu bạn cung cấp một lựa chọn không được nhận dạng, thì Cloud Video Stitcher API 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 phiên bản đượ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": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Chèn điểm chèn quảng cáo

API Công cụ kết hợp video trên đám mây của Google 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 đ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 một sự kiện phát trực tiếp bằng API Livestream của Google Cloud, hãy chèn một sự kiện kênh điểm chèn quảng cáo.

Quảng cáo sẽ phát ngay sau khi điểm chèn quảng cáo được chèn.

Dọn dẹp

Giờ đây, bạn đã tổ chức thành công một sự kiện phát trực tiếp bằng API Trình ghép video của Google Cloud và yêu cầu sự kiện đó bằng SDK IMA DAI cho HTML5, bạn cần dọn dẹp mọi tài nguyên phân phát.

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 nơi bạn khởi động máy chủ web Python 3, hãy dùng lệnh ctrl+C để kết thúc máy chủ cục bộ.