Trang này được dịch bởi Cloud Translation API.

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

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

Luồng VOD trên Play đượ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 DAI IMA cho HTML5 để yêu cầu và phát phiên phát trực tuyến VOD trên Google Cloud.

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.

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 VOD: 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 mã thông báo OAuth có thời gian tồn tại ngắn. 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 VOD

Mã cấu hình VOD cho luồng VOD: VOD_CONFIG_ID

Đọc thêm về cách tạo mã cấu hình VOD trong Hướng dẫn tạo cấu hình VOD bằng tính năng ghép nối trên đám mây.

Đị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 VideoStitcherVodStreamRequest. 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 rồi giải nén tệp zip 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 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ì khi 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, với các khoảng nghỉ quảng cáo sau mỗi 30 giây.

Yêu cầu luồng VOD

Để thay thế luồng mẫu bằng luồng VOD được ghép nối quảng cáo, hãy sử dụng lớp VideoStitcherVodStreamRequest để 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. Để làm cho ứng dụng 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 VideoStitcherVodStreamRequest.

Ví dụ:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Tải lại trang. Sau đó, bạn có thể yêu cầu và phát luồng VOD 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 VideoStitcherVodStreamRequest.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);

Dọn dẹp

Giờ đây, bạn đã lưu trữ thành công luồng VOD bằng API Google Cloud Video Stitcher và yêu cầu luồng đó 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.

Làm theo hướng dẫn dọn dẹp nội dung VOD để 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ộ.