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

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

IMA SDK 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 IMA DAI, các ứng dụng tạo ra một yêu cầu phát trực tuyến cho video quảng cáo và 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 video 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

DAI đầy đủ dịch vụ

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

Tổng quan về IMA DAI

Việc triển khai tính năng IMA DAI gồm 2 thành phần SDK chính như đã minh hoạ trong hướng dẫn sau:

StreamRequest— VODStreamRequest hoặc LiveStreamRequest: Đối tượng xác định yêu cầu luồng. Yêu cầu phát trực tiếp có thể là video theo yêu cầu hoặc sự kiện phát trực tiếp. Các yêu cầu chỉ định một mã nội dung, cũng như khoá 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ý luồng chèn quảng cáo động và các 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 phát trực tiếp và quảng cáo đế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 cài đặt trên máy tính của bạn hoặc một máy chủ web để dùng cho mục đích kiểm thử

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

Vì SDK IMA tải các phần phụ thuộc bằng cùng một giao thức với trang mà từ đó trang được tải, bạn cần sử dụng một máy chủ web để kiểm thử ứng dụng của mình. Cách đơn giản nhất để khởi động một 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 một dòng lệnh từ thư mục chứa tệp index.html 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 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ư Máy chủ HTTP Apache.

Tạo một trình phát video đơn giản

Trước tiên, hãy sửa đổi dai.html để tạo một phần tử video HTML5 đơn giản và một 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 đó, hãy 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 về yêu cầu luồng và hàm initPlayer() để chạy khi trang tải.

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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
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');
}

Tải SDK IMA

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>

Khởi chạy StreamManager và đưa ra yêu cầu phát trực tiếp

Để 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 quảng cáo DAI. Hàm khởi tạo lấy một phần tử video và thực thể thu được sẽ lấy một phần tử trên giao diện người dùng của quảng cáo để xử lý các lượt nhấp vào quảng cáo.

Sau đó, hãy định nghĩa các hàm yêu cầu luồng. Ví dụ này bao gồm các hàm cho cả video theo yêu cầu và sự kiện phát trực tiếp. Các hàm này sẽ tạo thực thể của VODStreamRequest và LiveStreamRequest tương ứng, sau đó gọi streamManager.requestStream() với các tham số streamRequest. Đối với các 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 đã tính giờ 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ã cho 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 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.

Trong ví dụ này, không có luồng nào được bảo vệ, vì vậy apiKey không được sử dụng.

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

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

Cuối cùng, bạn cần triển khai trình nghe 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ý các lỗi và việc tải luồng nội dung, cũng như tắt các nút điều khiển trình phát trong khi quảng cáo đang phát mà SDK yêu cầu. 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().

Bạn cũng nên 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 để cho phép người dùng tiếp tục phát khi IMA tạm dừng trong các điểm chèn quảng cáo.

Để làm việc với DAI, trình phát tuỳ chỉnh của bạn phải chuyển các sự kiện ID3 cho sự kiện phát trực tiếp đến IMA SDK như trong mã mẫu.

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! Bạn hiện đang yêu cầu và hiển thị quảng cáo bằng SDK IMA. Để 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 mẫu trên GitHub.