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

Bắt đầu sử dụng SDK IMA 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 tuân thủ VAST và quản lý việc phát quảng cáo trong các ứng dụng của bạn. Với SDK IMA DAI, ứng dụng tạo ra yêu cầu phát trực tuyến cho quảng cáo và video nội dung, VOD hoặc nội dung trực tiếp. Sau đó, SDK này 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 của bạn.

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

DAI (Chèn quảng cáo động) đầy đủ dịch vụ

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

Tổng quan về IMA DAI

Việc triển khai SDK IMA DAI liên quan đến hai thành phần chính như được 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. Các yêu cầu phát trực tiếp có thể là video theo yêu cầu hoặc video theo yêu cầu trực tiếp phát trực tuyến. Các yêu cầu sẽ chỉ định một Content ID, cũng như một khoá API hoặc mã xác thực và các thông tin tham số.
StreamManager: Đối tượng xử lý luồng chèn quảng cáo động và hoạt động tương tác với phần phụ trợ DAI. Chiến lược phát hành đĩa đơn Trình quản lý luồng cũng xử lý các ping theo dõi cũng như chuyển tiếp các sự kiện luồng và quảng cáo đến nhà xuất bản.

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

3 tệp trống
- dai.html
- dai.css
- dai.js
Đã cài đặt Python trên máy tính hoặc máy chủ web để dùng cho việc 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ách sử dụng cùng một giao thức như trang từ đó ứng dụng được tải, bạn cần sử dụng máy chủ web để kiểm thử ứng dụng. Đáp cách nhanh chóng để bắt đầu một máy chủ phát triển cục bộ là sử dụng các tính năng tích hợp sẵn máy chủ.

Sử dụng một dòng lệnh từ thư mục chứa tệp index.html của 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 Máy chủ.

Tạo 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 để cho tỷ lệ nhấp. Ngoài ra, hãy thêm các thẻ cần thiết để tải 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ữ yêu cầu luồng và một 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 DAI 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 DAI

Tiếp theo, 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à tạo 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 khởi tạo sẽ lấy một giá trị phần tử video và bản sao thu được sẽ lấy phần tử giao diện người dùng quảng cáo để xử lý quảng cáo số nhấp chuột.

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ả video theo yêu cầu và sự kiện phát trực tiếp, để tạo các bản sao của VODStreamRequest và LiveStreamRequest rồi gọi streamManager.requestStream() bằng tham số streamRequest. Đối với sự kiện phát trực tiếp, bạn cũng cần thêm để theo dõi các sự kiện siêu dữ liệu được định 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 khoá API không bắt buộc. Nếu đang sử dụng một luồng được bảo vệ, bạn cần tạo khoá xác thực DAI.

Không luồng nào trong ví dụ này đượ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 chính. Chiến dịch này Ví dụ đơn giản này sẽ xử lý LOADED, ERROR, AD_BREAK_STARTED và AD_BREAK_ENDED sự kiện bằng cách gọi một hàm onStreamEvent(). Hàm này xử lý lỗi và quá trình tải luồng, 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 nên trình phát video sẽ tải và phát URL đã cung cấp bằng một loadUrl() .

Bạn cũng có thể thiết lập trình nghe sự kiện cho pause của phần tử video và start sự kiện để cho phép người dùng tiếp tục phát khi IMA tạm dừng trong đ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 vượt qua các sự kiện ID3 cho sự kiện phát trực tiếp vào SDK IMA DAI như hiển thị 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! Giờ đây, bạn đang yêu cầu và hiển thị quảng cáo thông qua SDK IMA DAI. Người nhận tìm hiểu về các tính năng SDK nâng cao khác, xem các hướng dẫn khác hoặc mẫu trên GitHub.