Để thảo luận và đưa ra ý kiến phản hồi về các sản phẩm của chúng tôi, hãy tham gia kênh Discord chính thức của Ad Manager trong máy chủ Cộng đồng quảng cáo và đo lường của Google.

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

Thiết lập SDK IMA 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 tuân thủ VAST nào và quản lý việc phát quảng cáo trong ứng dụng của bạn. Với SDK DAI của IMA, các ứng dụng sẽ đưa ra yêu cầu về luồng cho quảng cáo và video nội dung – có thể là 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, nhờ đó 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 của mình.

Chọn giải pháp DAI mà bạn quan tâm

Phát các luồng phát trực tiếp đã đă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 một luồng phát trực tiếp cho một sự kiện đã đăng ký bằng API Video Stitcher của Google Cloud, cũng như cách chèn một điểm chèn quảng cáo trong quá trình phát.

Hướng dẫn này mở rộng ví dụ cơ bản trong hướng dẫn Bắt đầu cho DAI của IMA.

Để 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 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 ghép video trên đám mây xuống cho HLS hoặc DASH.

Thiết lập một dự án trên Google Cloud

Thiết lập một 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 một 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 một 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 bạn tạo cấu hình trực tiếp: 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 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 đăng nhập 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 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 sự kiện phát 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á tài sản tuỳ chỉnh 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

Đị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 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 một trình nghe cho các sự kiện tiến trình của trình phát video. Trình nghe 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' cho luồng HLS và 'urn:google:dai:2018' cho 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 sớm và thường xuyên nhất có thể khi các sự kiện của trình phát cung cấp. Nếu thiếu hoặc không có siêu dữ liệu chính xác, IMA DAI SDK 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ác sự kiện quảng cáo.

Tải các ví dụ về DAI IMA cho HTML5 xuống và trích xuất 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ụ cục bộ, hãy chuyển đến thư mục mới và chạy lệnh python sau để khởi động một 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 rồi 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, 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 phát 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 luồng phát trực tiếp của bạn, 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 để xác định vị trí các phiên DAI đã tạo nhằm mục đích giám sát và gỡ lỗi.

Trong mẫu hiện có, có các hàm để yêu cầu một luồng VOD hoặc một luồng phát trực tiếp. Để sử dụng được với API Google Cloud Video Stitcher, bạn cần thêm một hàm mới để trả về một đố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);
}

Đối với kiểm thử cục bộ, nếu các tệp phát trực tiếp nằm trong một vùng chứa Cloud Storage, thì bạn cần bật CORS cho nguồn 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 về phiên phát trực tiếp

Tuỳ chỉnh yêu cầu phát trực tiếp 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, 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 trợ giúp.

Ví dụ: bạn có thể ghi đè các lựa chọn trong tệp kê khai bằng đoạn mã sau. Đoạn mã này yêu cầu 2 tệp kê khai luồng có các bản kết xuất được sắp xếp theo thứ tự 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 sẽ 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. Quảng cáo xen giữa đượ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 do bộ mã hoá luồng phát trực tiếp chèn vào.

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 Google Cloud Livestream API, hãy chèn sự kiện kênh tạm dừng quảng cáo.

Quảng cáo sẽ phát ngay sau khi khoảng thời gian chèn quảng cáo được thêm và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 cách sử dụng API Google Cloud Video Stitcher và yêu cầu luồng phát đó bằng SDK DAI của IMA 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 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 dùng lệnh ctrl+C để kết thúc máy chủ cục bộ.