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

Bắt đầu

IMA SDK giúp dễ dàng tích hợp quảng cáo đa phương tiện vào các trang web và ứng dụng của bạn. 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 các ứng dụng của bạn. Với IMA DAI SDK, ứng dụng đưa ra yêu cầu luồng 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ề 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 của mình.

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

Tổng quan về IMA DAI

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

StreamRequest—VODStreamRequest hoặc LiveStreamRequest: Đối tượng xác định yêu cầu luồng. Các yêu cầu phát trực tiếp có thể dành cho video theo yêu cầu hoặc sự kiện phát trực tiếp. Yêu cầu chỉ định ID nội dung, cũng như khóa API hoặc mã thông báo xác thực và các tham số khác.
StreamManager: Đối tượng xử lý các luồng chèn quảng cáo động và lượt tương tác với phần phụ trợ DAI. Trình quản lý luồng cũng xử lý các ping theo dõi, đồng thời chuyển tiếp các sự kiện quảng cáo và luồng tới nhà xuất bản.

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

Trước khi bắt đầu, bạn cần có:

3 tệp trống
- dai.html
- dai.css
- dai.js
Python được cài đặt trên máy tính của bạn hoặc máy chủ web để sử dụng cho việc kiểm tra

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

Vì SDK IMA tải các phần phụ thuộc thông qua cùng một giao thức với trang mà SDK tải dữ liệu đó, nên bạn cần sử dụng máy chủ web để kiểm thử ứng dụng. Cách đơn giản nhất để khởi động máy chủ phát triển cục bộ là sử dụng máy chủ tích hợp của Python.

Sử dụng dòng lệnh, từ thư mục chứa tệp index.html mà bạn chạy:
```
python -m http.server 8000
```
Lưu ý: http.server chỉ có trong Python 3.x.
Trên trình duyệt web, hãy truy cập vào 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ư Apache HTTP Server.

2. Tạo trình phát video đơn giản

Trước tiên, hãy sửa đổi dai.html để tạo phần tử video HTML5 đơn giản và div để sử dụng cho lượt nhấp. 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 đó, sửa đổi dai.css để chỉ định kích thước và vị trí của các phần tử trang. Cuối cùng, trong dai.js, hãy xác định các biến để lưu giữ thông tin yêu cầu luồng và hàm initPlayer() để chạy khi tải trang.

dai.html


<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

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

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Live stream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

3. Tải IMA SDK

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.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

...

4. Khởi chạy StreamManager và đưa ra yêu cầu luồng

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

Sau đó, hãy 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à luồng trực tiếp, tạo các phiên bản tương ứng của VODStreamRequest và LiveStreamRequest, sau đó gọi streamManager.requestStream() với các thông số streamRequest. Đối với các sự kiện trực tiếp, bạn cũng cần thêm trình xử lý để nghe 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 StreamManager. Bạn có thể nhận xét hoặc huỷ nhận xét về mã để phù hợp với trường hợp sử dụng của mình. Cả hai phương thức đều lấy một khóa API không bắt buộc. Nếu đang sử dụng luồng mã hoá, bạn cần tạo khoá xác thực DAI.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, 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);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

5. Xử lý sự kiện phát trực tiếp

Cuối cùng, bạn cần triển khai trình xử lý sự kiện cho các sự kiện video lớn. Ví dụ đơn giản này xử lý các sự kiện LOADED, ERROR, AD_BREAK_STARTED và AD_BREAK_ENDED bằng cách gọi một hàm onStreamEvent(). Hàm này xử lý việc tải luồng và lỗi, cũng như tắt các chế độ điều khiển trình phát trong khi quảng cáo đang phát, SDK này yêu cầu. Khi luồng được tải, trình phát video sẽ tải và phát URL đã cung cấp bằng cách sử dụng hàm loadUrl().

Bạn cũng sẽ muốn thiết lập trình xử lý sự kiện cho các sự kiện pause và start của thành phần video để cho phép người dùng tiếp tục phát khi IMA tạm dừng trong thời gian ngắt quảng cáo.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  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);

...

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');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

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();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

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