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

Thiết lập SDK IMA cho 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

DAI trọn gói

Hướng dẫn này minh hoạ cách tích hợp SDK IMA DAI vào ứng dụng trình phát video. Nếu bạn muốn xem hoặc làm theo một ví dụ tích hợp mẫu đã hoàn tất, hãy tải ví dụ đơn giản xuống từ GitHub.

Tổng quan về DAI của IMA

Việc triển khai SDK IMA DAI bao gồm hai thành phần chính như minh hoạ trong hướng dẫn này:

StreamRequest – VODStreamRequest hoặc LiveStreamRequest: Một đối tượng xác định yêu cầu truyền trực tuyến. Yêu cầu phát trực tuyến có thể là cho video theo yêu cầu hoặc sự kiện phát trực tiếp. Yêu cầu phát trực tiếp chỉ định khoá thành phần, còn yêu cầu VOD chỉ định mã CMS và mã video. Cả hai loại yêu cầu đều có thể bao gồm khoá API cần thiết để truy cập vào các luồng đã chỉ định và mã mạng Google Ad Manager cho SDK IMA để xử lý giá trị nhận dạng quảng cáo như được chỉ định trong phần cài đặt Google Ad Manager.
StreamManager: Một đối tượng xử lý các luồng chèn quảng cáo động và tương tác với phần phụ trợ DAI. Trình quản lý luồng cũng xử lý ping theo dõi và chuyển tiếp sự kiện quảng cáo và luồng đến nhà xuất bản.

Điều kiện tiên quyết

Ba tệp trống
- dai.html
- dai.css
- dai.js
Python đã cài đặt trên máy tính hoặc máy chủ web để dùng cho hoạt động kiểm thử

Khởi động máy chủ phát triển

Vì SDK IMA DAI tải các phần phụ thuộc bằng cùng một giao thức với trang tải phần phụ thuộc, nên bạn cần sử dụng máy chủ web để kiểm thử ứng dụng. Một cách nhanh chóng để khởi động máy chủ phát triển cục bộ là sử dụng máy chủ tích hợp sẵn của Python.

Sử dụng dòng lệnh, từ thư mục chứa tệp index.html, hãy chạy:
```
python -m http.server 8000
```
Lưu ý: http.server chỉ có trong Python 3.x.
Trong trình duyệt web, hãy chuyển đến http://localhost:8000/

Bạn cũng 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.

Tạo trình phát video

Trước tiên, hãy sửa đổi dai.html để tạo một phần tử video HTML5 và một div để sử dụng cho lượt nhấp. Ví dụ sau đây nhập SDK IMA DAI. Để biết thêm thông tin chi tiết, hãy xem phần Nhập SDK IMA DAI.

Ngoài ra, hãy thêm các thẻ cần thiết để tải tệp dai.css và dai.js, cũng như để nhập trình phát video hls.js. Sau đó, hãy sửa đổi dai.css để chỉ định kích thước và vị trí của các phần tử trên trang. Cuối cùng, trong dai.js, hãy xác định các biến để lưu trữ thông tin yêu cầu phát trực tuyến, một hàm initPlayer() để chạy khi trang tải và thiết lập nút phát để yêu cầu phát trực tuyến khi nhấp.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>

dai.html

#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}
dai.css

// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

// VOD content source and video IDs.
const TEST_CONTENT_SOURCE_ID = '2548831';
const TEST_VIDEO_ID = 'tears-of-steel';

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}dai.js

Để tiếp tục phát trong các khoảng nghỉ quảng cáo đã tạm dừng, hãy thiết lập trình nghe sự kiện cho các sự kiện pause và start của phần tử video để hiển thị và ẩn các nút điều khiển trình phát.

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}dai.js

Tải SDK IMA DAI

Tiếp theo, hãy thêm khung IMA bằng cách sử dụng thẻ tập lệnh trong dai.html, trước thẻ cho dai.js.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>dai.html

Khởi chạy StreamManager

Để yêu cầu một nhóm quảng cáo, hãy tạo một ima.dai.api.StreamManager. Lớp này chịu trách nhiệm yêu cầu và quản lý các luồng DAI. Hàm khởi tạo lấy một phần tử video và một phần tử giao diện người dùng quảng cáo để xử lý lượt nhấp vào quảng cáo.

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}dai.js

Tạo yêu cầu truyền trực tuyến

Xác định các hàm để yêu cầu luồng. Ví dụ này bao gồm các hàm cho cả VOD và sự kiện phát trực tiếp, các hàm này tạo các thực thể của lớp VODStreamRequest và lớp LiveStreamRequest. Sau khi bạn có thực thể streamRequest, hãy gọi phương thức streamManager.requestStream() bằng thực thể yêu cầu luồng.

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}dai.js

Cả hai phương thức yêu cầu luồng đều sử dụng khoá API không bắt buộc. Nếu đang sử dụng luồng được bảo vệ, bạn cần tạo khoá xác thực DAI. Để biết thêm thông tin, hãy xem phần Xác thực yêu cầu phát luồng video DAI. Không có luồng nào trong ví dụ này được bảo vệ bằng khoá xác thực DAI, vì vậy, apiKey không được sử dụng.

Phân tích cú pháp siêu dữ liệu của sự kiện phát trực tiếp (chỉ áp dụng cho sự kiện phát trực tiếp)

Đối với sự kiện phát trực tiếp, bạn cũng cần thêm một trình xử lý để theo dõi các sự kiện siêu dữ liệu theo thời gian và chuyển tiếp các sự kiện đó đến lớp StreamManager để IMA phát các sự kiện quảng cáo trong khoảng thời gian chèn quảng cáo:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Only used in LIVE streams. Timed metadata is handled differently
  // by different video players, and the IMA SDK provides two ways
  // to pass in metadata, StreamManager.processMetadata() and
  // StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  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);
      });
    }
  });
}dai.js

Hướng dẫn này sử dụng trình phát hls.js để phát trực tuyến, nhưng việc triển khai siêu dữ liệu sẽ phụ thuộc vào loại trình phát mà bạn sử dụng.

Xử lý sự kiện phát trực tuyến

Triển khai trình nghe sự kiện cho các sự kiện video chính. Ví dụ này xử lý các sự kiện LOADED, ERROR, AD_BREAK_STARTED và AD_BREAK_ENDED bằng cách gọi hàm onStreamEvent(). Hàm này xử lý việc tải luồng, lỗi luồng và tắt các nút điều khiển trình phát trong khi phát quảng cáo mà SDK IMA yêu cầu.

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}dai.js

Khi luồng được tải, trình phát video sẽ tải và phát URL được cung cấp bằng hàm loadUrl().

Vậy là xong! Bạn hiện đang yêu cầu và hiển thị quảng cáo bằng SDK IMA DAI. Để tìm hiểu về các tính năng SDK nâng cao hơn, hãy xem các hướng dẫn khác hoặc mẫu trên GitHub.