Để 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.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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.

Phát các luồng video theo yêu cầu (VOD) đã đăng ký với API Google Cloud Video Stitcher

Hướng dẫn này trình bày cách sử dụng SDK IMA DAI cho HTML5 để yêu cầu và phát một phiên luồng 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 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.

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.

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 VOD: 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

Đọc thêm về cách tạo mã thông báo OAuth ngắn hạn. 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 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.

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

Ứ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 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ó 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 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 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 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 đúng cách, 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, với các điểm chèn 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 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 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 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 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 VideoStitcherVodStreamRequest.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);

Dọn dẹp

Giờ đây, bạn đã lưu trữ thành công một luồng VOD bằng API Trình ghép video của Google Cloud và yêu cầu luồng đó 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 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 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ộ.