Thêm tính năng hỗ trợ API điểm chèn quảng cáo vào trình thu nhận web

1. Tổng quan

Biểu trưng Google Cast

Lớp học lập trình này trình bày cách tạo ứng dụng Trình thu nhận web tuỳ chỉnh sử dụng API Cast Ad Breaks.

Google Cast là gì?

Google Cast cho phép người dùng truyền nội dung từ thiết bị di động sang TV. Sau đó, người dùng có thể dùng thiết bị di động làm điều khiển từ xa để phát nội dung nghe nhìn trên TV.

SDK Google Cast cho phép bạn mở rộng ứng dụng của mình để điều khiển TV hoặc hệ thống âm thanh. SDK truyền cho phép bạn thêm các thành phần giao diện người dùng cần thiết dựa trên Danh sách kiểm tra thiết kế Google Cast.

Danh sách kiểm tra thiết kế Google Cast được cung cấp để chuẩn hoá việc triển khai Cast nhằm mang lại trải nghiệm trực quan cho người dùng trên tất cả các nền tảng được hỗ trợ.

Chúng ta sẽ xây dựng gì?

Khi hoàn tất lớp học lập trình này, bạn sẽ tạo được một Cast Receiver tận dụng Break API.

Kiến thức bạn sẽ học được

  • Cách thêm điểm chèn VMAP và VAST vào nội dung cho Cast
  • Cách bỏ qua các đoạn chèn quảng cáo
  • Cách tuỳ chỉnh hành vi ngắt mặc định khi tua

Bạn cần có

  • Trình duyệt Google Chrome mới nhất.
  • Dịch vụ lưu trữ HTTPS, chẳng hạn như Lưu trữ Firebase hoặc ngrok.
  • Thiết bị Google Cast như Chromecast hoặc Android TV được định cấu hình để có quyền truy cập Internet.
  • TV hoặc màn hình có đầu vào HDMI hoặc Google Home Hub

Trải nghiệm

Hãy đảm bảo bạn có kinh nghiệm sau đây trước khi tiếp tục tham gia lớp học lập trình này.

  • Kiến thức chung về phát triển web.
  • Xây dựng ứng dụng Cast Web Receiver.

Bạn sẽ sử dụng hướng dẫn này như thế nào?

Chỉ đọc qua Đọc và hoàn thành bài tập

Bạn đánh giá trải nghiệm xây dựng ứng dụng web của mình như thế nào?

Tân binh Trung cấp Thành thạo

2. Nhận mã mẫu

Tải tất cả mã mẫu xuống máy tính của bạn...

và giải nén tệp zip đã tải xuống.

3. Triển khai trình nhận cục bộ

Để có thể sử dụng bộ thu web với Thiết bị truyền, thiết bị cần được lưu trữ ở nơi nào đó mà thiết bị Truyền của bạn có thể tiếp cận. Nếu bạn đã có một máy chủ hỗ trợ https, hãy bỏ qua hướng dẫn sau và ghi lại URL vì bạn sẽ cần URL đó trong phần tiếp theo.

Nếu không có máy chủ để sử dụng, bạn có thể sử dụng tính năng Lưu trữ Firebase hoặc ngrok.

Chạy máy chủ

Sau khi thiết lập dịch vụ bạn chọn, hãy chuyển đến app-start và khởi động máy chủ.

Ghi lại URL của dịch vụ nhận được lưu trữ. Bạn sẽ sử dụng lớp này trong phần tiếp theo.

4. Đăng ký ứng dụng trong Bảng điều khiển dành cho nhà phát triển Cast

Bạn phải đăng ký ứng dụng để có thể chạy một trình thu phát tuỳ chỉnh (được tích hợp sẵn trong lớp học lập trình này) trên các thiết bị Chromecast. Sau khi bạn đăng ký ứng dụng, một mã ứng dụng sẽ được tạo và bạn phải định cấu hình Ứng dụng gửi để chạy ứng dụng Trình nhận web.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK của Google Cast, trong đó nút "Thêm ứng dụng mới" được làm nổi bật

Nhấp vào "Thêm ứng dụng mới"

Hình ảnh màn hình "New Receiver Application" (Ứng dụng bộ thu mới) với tuỳ chọn "Custom Receiver" (Bộ thu tuỳ chỉnh) được làm nổi bật

Chọn "Custom receiver" (Bộ thu tuỳ chỉnh), đây là cấu hình mà chúng ta đang xây dựng.

Hình ảnh màn hình "Trình nhận tuỳ chỉnh mới" hiển thị một URL mà người dùng đang nhập vào trường "URL ứng dụng của trình nhận"

Nhập thông tin chi tiết về trình nhận mới. Hãy nhớ sử dụng URL trỏ đến nơi bạn dự định lưu trữ ứng dụng Bộ thu web. Ghi lại Mã ứng dụng do bảng điều khiển tạo sau khi bạn đăng ký ứng dụng. Ứng dụng của người gửi sẽ được định cấu hình để dùng giá trị nhận dạng đó trong phần sau.

Bạn cũng phải đăng ký thiết bị Google Cast để thiết bị đó có thể truy cập vào ứng dụng receiver của bạn trước khi bạn phát hành ứng dụng. Sau khi bạn xuất bản ứng dụng nhận, ứng dụng đó sẽ khả dụng cho tất cả thiết bị Google Cast. Để phục vụ cho mục đích của lớp học lập trình này, bạn nên làm việc với một ứng dụng receiver chưa xuất bản.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK của Google Cast, trong đó nút "Thêm thiết bị mới" được làm nổi bật

Nhấp vào "Thêm thiết bị mới"

Hình ảnh hộp thoại "Thêm thiết bị nhận nội dung truyền"

Nhập số sê-ri được in ở mặt sau của thiết bị Cast rồi đặt tên mô tả cho thiết bị đó. Bạn cũng có thể tìm thấy số sê-ri bằng cách truyền màn hình trong Chrome khi truy cập vào Bảng điều khiển dành cho nhà phát triển SDK của Google Cast

Bạn sẽ mất khoảng 5 đến 15 phút để thiết bị và bộ thu của mình sẵn sàng cho việc kiểm thử. Sau khi đợi 5 đến 15 phút, bạn phải khởi động lại thiết bị Truyền.

5. Chuẩn bị dự án khởi động

Trước khi bắt đầu lớp học lập trình này, bạn nên xem lại hướng dẫn dành cho nhà phát triển quảng cáo để biết thông tin tổng quan về API điểm chèn quảng cáo.

Bạn cần thêm tính năng hỗ trợ Google Cast vào ứng dụng khởi động mà bạn đã tải xuống. Sau đây là một số thuật ngữ Google Cast được sử dụng trong lớp học lập trình này:

  • ứng dụng sender chạy trên thiết bị di động hoặc máy tính xách tay,
  • ứng dụng receiver (trình nhận) chạy trên thiết bị Google Cast.

Bây giờ, bạn đã sẵn sàng xây dựng dựa trên dự án khởi đầu bằng trình chỉnh sửa văn bản yêu thích của mình:

  1. Chọn thư mục biểu tượng thư mụcapp-start trong tệp tải xuống mã mẫu.
  2. Mở js/receiver.js và index.html

Lưu ý: Khi thực hiện lớp học lập trình này, bạn cần cập nhật giải pháp lưu trữ web mà mình chọn khi thực hiện các thay đổi. Đảm bảo rằng bạn đang chuyển các thay đổi sang trang web lưu trữ khi tiếp tục xác thực và kiểm tra các thay đổi đó.

Thiết kế ứng dụng

Như đã đề cập, lớp học lập trình này sử dụng một ứng dụng gửi để bắt đầu Phiên truyền và một ứng dụng nhận sẽ được sửa đổi để sử dụng các API điểm chèn quảng cáo.

Trong lớp học lập trình này, Công cụ truyền và lệnh sẽ đóng vai trò là Trình gửi web để chạy ứng dụng nhận. Để bắt đầu, hãy mở công cụ này trong trình duyệt Chrome. Nhập Mã ứng dụng của trình nhận mà bạn đã nhận được trên Bảng điều khiển dành cho nhà phát triển của SDK Cast rồi nhấp vào Đặt để định cấu hình ứng dụng của trình gửi cho mục đích kiểm thử.

Lưu ý: Nếu bạn thấy biểu tượng truyền không xuất hiện, hãy đảm bảo rằng Trình thu web và(các) thiết bị truyền đã được đăng ký đúng cách trong Cast Developer Console. Nếu bạn chưa thực hiện việc này, hãy bật nguồn mọi thiết bị truyền vừa được đăng ký.

Ứng dụng receiver (trình nhận) là trọng tâm chính của lớp học lập trình này và bao gồm một thành phần hiển thị chính được xác định trong index.html và một tệp JavaScript có tên là js/receiver.js. Các loại này được mô tả chi tiết hơn ở bên dưới.

index.html

Tệp html này chứa giao diện người dùng cho ứng dụng receiver do phần tử cast-media-player cung cấp. Tệp này cũng tải SDK CAF và thư viện Trình ghi gỡ lỗi truyền.

receiver.js

Tập lệnh này quản lý tất cả logic cho ứng dụng nhận. Hiện tại, tập lệnh này chứa một bộ thu CAF cơ bản để khởi tạo ngữ cảnh truyền và tải một thành phần video khi khởi chạy. Một số tính năng của trình ghi gỡ lỗi cũng đã được thêm vào để cung cấp tính năng ghi nhật ký trở lại cho công cụ Truyền và Lệnh.

6. Thêm VMAP vào nội dung của bạn

SDK Bộ thu web Cast hỗ trợ quảng cáo được chỉ định thông qua Danh sách phát nhiều quảng cáo dạng video kỹ thuật số, còn gọi là VMAP. Cấu trúc XML chỉ định điểm chèn quảng cáo của một nội dung nghe nhìn và siêu dữ liệu của đoạn video có liên kết với điểm chèn đó. Để chèn các quảng cáo này, SDK cung cấp thuộc tính vmapAdsRequest trong đối tượng MediaInformation.

Trong tệp js/receiver.js, hãy tạo một đối tượng VastAdsRequest. Tìm hàm tải trình chặn yêu cầu rồi thay thế bằng mã sau đây. Thẻ này chứa URL thẻ VMAP mẫu từ DoubleClick và cung cấp giá trị tương quan ngẫu nhiên để đảm bảo rằng các yêu cầu tiếp theo tới cùng một URL tạo ra mẫu XML có các điểm chèn quảng cáo mà bạn chưa xem.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');

      // Create the VMAP Ads request data and append it to the MediaInformation.
      const vmapUrl =
          'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
          Math.floor(Math.random() * Math.pow(10, 10));
      let vmapRequest = new cast.framework.messages.VastAdsRequest();
      vmapRequest.adTagUrl = vmapUrl;
      loadRequestData.media.vmapAdsRequest = vmapRequest;

      castDebugLogger.warn(
          'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);

      return loadRequestData;
    });

Lưu các thay đổi của bạn vào js/receiver.js rồi tải tệp lên máy chủ web. Bắt đầu một phiên Truyền trên Công cụ truyền và điều khiển bằng cách nhấp vào biểu tượng Truyền. Quảng cáo VMAP sẽ phát, sau đó là nội dung chính.

7. Thêm VAST vào nội dung của bạn

Như đã đề cập trước đó, nhiều loại quảng cáo trong SDK Bộ thu web có hỗ trợ. Phần này nêu bật các API có sẵn để tích hợp quảng cáo Mẫu phân phát quảng cáo dạng video kỹ thuật số (còn gọi là VAST). Nếu bạn đã triển khai mã VMAP từ phần trước, hãy ghi chú nội dung đó.

Sao chép nội dung sau vào tệp js/receiver.js sau trình chặn yêu cầu tải. Tệp này chứa sáu đoạn chèn quảng cáo VAST từ DoubleClick và một giá trị tương quan ngẫu nhiên. Những đoạn quảng cáo này được chỉ định cho 5 điểm chèn quảng cáo. position của mỗi điểm chèn quảng cáo được đặt thành thời gian tính bằng giây so với nội dung chính, bao gồm cả điểm chèn quảng cáo trước video (position được đặt thành 0) và điểm chèn quảng cáo sau video (position được đặt thành -1).

const addVASTBreaksToMedia = (mediaInformation) => {
  mediaInformation.breakClips = [
    {
      id: 'bc1',
      title: 'bc1 (Pre-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('preroll')
      }
    },
    {
      id: 'bc2',
      title: 'bc2 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc3',
      title: 'bc3 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc4',
      title: 'bc4 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc5',
      title: 'bc5 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc6',
      title: 'bc6 (Post-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('postroll')
      }
    }
  ];

  mediaInformation.breaks = [
    {id: 'b1', breakClipIds: ['bc1'], position: 0},
    {id: 'b2', breakClipIds: ['bc2'], position: 15},
    {id: 'b3', breakClipIds: ['bc3', 'bc4'], position: 60},
    {id: 'b4', breakClipIds: ['bc5'], position: 100},
    {id: 'b5', breakClipIds: ['bc6'], position: -1}
  ];
};

Lưu ý: Thuộc tính breakClipIds của một điểm chèn quảng cáo là một mảng, nghĩa là bạn có thể chỉ định nhiều đoạn quảng cáo cho mỗi điểm chèn quảng cáo.

Trong js/receiver.js file, hãy tìm trình chặn thông báo TẢI rồi thay thế bằng mã sau. Xin lưu ý rằng công việc VMAP được chú thích để giới thiệu quảng cáo loại VAST.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');

      // Create the VMAP Ads request data and append it to the MediaInformation.
      // const vmapUrl =
      //     'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
      //     Math.floor(Math.random() * Math.pow(10, 10));
      // let vmapRequest = new cast.framework.messages.VastAdsRequest();
      // vmapRequest.adTagUrl = vmapUrl;
      // loadRequestData.media.vmapAdsRequest = vmapRequest;

      // Append VAST ad breaks to the MediaInformation.
      addVASTBreaksToMedia(loadRequestData.media);

      castDebugLogger.warn(
          'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);

      return loadRequestData;
    });

Lưu các thay đổi vào js/receiver.js rồi tải tệp lên máy chủ web. Bắt đầu một phiên Truyền trên Công cụ truyền và điều khiển bằng cách nhấp vào biểu tượng Truyền. Quảng cáo VAST nên phát, theo sau là nội dung chính.

8. Bỏ qua điểm chèn quảng cáo

CAF có một lớp tên là BreakManager hỗ trợ bạn triển khai các quy tắc kinh doanh tuỳ chỉnh cho hành vi quảng cáo. Một trong những tính năng này cho phép các ứng dụng bỏ qua các điểm chèn quảng cáo và cắt đoạn video dựa trên một số điều kiện. Ví dụ này cho biết cách bỏ qua một điểm chèn quảng cáo có vị trí nằm trong 30 giây đầu tiên của nội dung chứ không phải các điểm chèn sau video. Khi sử dụng quảng cáo VAST được định cấu hình trong phần trước, có 5 điểm chèn quảng cáo được xác định: 1 điểm chèn quảng cáo trước video, 3 điểm chèn quảng cáo trong video (tại 15, 60 và 100 giây) và cuối cùng là 1 điểm chèn quảng cáo sau video. Sau khi hoàn tất các bước, chỉ những quảng cáo trước video và trong video có vị trí là 15 giây mới bị bỏ qua.

Để làm như vậy, ứng dụng phải gọi các API có sẵn thông qua BreakManager để đặt trình chặn tải điểm ngắt. Sao chép dòng sau vào tệp js/receiver.js, sau các dòng chứa biến context và playerManager để tham chiếu đến thực thể.

const breakManager = playerManager.getBreakManager();

Ứng dụng phải thiết lập một trình chặn có quy tắc bỏ qua mọi điểm chèn quảng cáo xảy ra trước 30 giây, đồng thời lưu ý mọi điểm chèn quảng cáo sau video (vì giá trị position của các điểm chèn quảng cáo này là -1). Trình chặn này hoạt động giống như trình chặn LOAD trên PlayerManager, ngoại trừ trình chặn này dành riêng cho việc tải đoạn video chèn quảng cáo. Đặt giá trị này sau trình chặn yêu cầu LOAD và trước phần khai báo hàm addVASTBreaksToMedia.

Sao chép nội dung sau vào tệp js/receiver.js.

breakManager.setBreakClipLoadInterceptor((breakClip, breakContext) => {
  /**
   * The code will skip playback of break clips if the break position is within
   * the first 30 seconds.
   */
  let breakObj = breakContext.break;
  if (breakObj.position >= 0 && breakObj.position < 30) {
    castDebugLogger.debug(
        'MyAPP.LOG',
        'Break Clip Load Interceptor skipping break with ID: ' + breakObj.id);
    return null;
  } else {
    return breakClip;
  }
});

Lưu ý: Việc trả về null tại đây sẽ bỏ qua BreakClip đang được xử lý. Nếu Break không có đoạn giới thiệu nào được xác định, thì chính đoạn giới thiệu đó sẽ bị bỏ qua.

Lưu các thay đổi vào js/receiver.js rồi tải tệp lên máy chủ web. Bắt đầu một phiên Truyền trên Công cụ truyền và điều khiển bằng cách nhấp vào biểu tượng Truyền. Quảng cáo VAST phải được xử lý. Xin lưu ý rằng quảng cáo trước video và trong video đầu tiên (có position là 15 giây) không được phát.

9. Tuỳ chỉnh hành vi tìm điểm ngắt

Khi tua lại các điểm chèn quảng cáo trước đó, phương thức triển khai mặc định sẽ lấy tất cả các mục Break có vị trí nằm giữa các giá trị seekFrom và seekTo của thao tác tua. Trong danh sách điểm chèn quảng cáo này, SDK sẽ phát Break có position gần nhất với giá trị seekTo và thuộc tính isWatched được đặt thành false. Sau đó, thuộc tính isWatched của điểm chèn quảng cáo được đặt thành true và người chơi sẽ bắt đầu phát các đoạn video chèn quảng cáo đó. Sau khi xem phần chèn quảng cáo, nội dung chính sẽ tiếp tục phát từ vị trí seekTo. Nếu không có điểm chèn quảng cáo nào như vậy, thì không có điểm chèn quảng cáo nào được phát và nội dung chính sẽ tiếp tục phát tại vị trí seekTo.

Để tuỳ chỉnh thời điểm phát quảng cáo khi tua, SDK Cast cung cấp API setBreakSeekInterceptor trong BreakManager. Khi một ứng dụng cung cấp logic tuỳ chỉnh thông qua API đó, SDK sẽ gọi logic đó bất cứ khi nào thao tác tìm kiếm được thực hiện trên một hoặc nhiều điểm chèn quảng cáo. Hàm callback được truyền một đối tượng chứa tất cả các điểm ngắt giữa vị trí seekFrom và vị trí seekTo. Sau đó, ứng dụng cần sửa đổi và trả về BreakSeekData.

Để minh hoạ cách sử dụng, mẫu dưới đây sẽ ghi đè hành vi mặc định bằng cách bỏ qua tất cả các điểm chèn quảng cáo đã được tua lại và chỉ phát điểm chèn quảng cáo đầu tiên xuất hiện trong tiến trình.

Sao chép nội dung sau vào tệp js/receiver.js trong phần khai báo đến setBreakClipLoadInterceptor.

breakManager.setBreakSeekInterceptor((breakSeekData) => {
  /**
   * The code will play an unwatched break between the seekFrom and seekTo
   * position. Note: If the position of a break is less than 30 then it will be
   * skipped due to the setBreakClipLoadInterceptor code.
   */
  castDebugLogger.debug(
      'MyAPP.LOG',
      'Break Seek Interceptor processing break ids ' +
          JSON.stringify(breakSeekData.breaks.map(adBreak => adBreak.id)));

  // Remove all other breaks except for the first one.
  breakSeekData.breaks.splice(1,breakSeekData.breaks.length);
  return breakSeekData;
});

Lưu ý: Nếu hàm không trả về giá trị hoặc nếu hàm trả về null, thì không có điểm ngắt nào được phát.

Lưu các thay đổi của bạn vào js/receiver.js rồi tải tệp lên máy chủ web. Bắt đầu phiên Truyền trên Công cụ truyền và lệnh bằng cách nhấp vào biểu tượng Truyền. Quảng cáo VAST cần được xử lý. Xin lưu ý rằng quảng cáo trước video và trong video đầu tiên (có position là 15 giây) không được phát.

Chờ thời gian phát đạt đến 30 giây để vượt qua tất cả các điểm chèn quảng cáo bị trình chặn tải đoạn chèn quảng cáo bỏ qua. Khi đạt đến thời điểm đó, hãy gửi lệnh tua bằng cách chuyển đến thẻ Media Control (Điều khiển nội dung nghe nhìn). Điền 300 giây vào dữ liệu đầu vào Seek Into Media rồi nhấp vào nút TO. Hãy lưu ý các nhật ký được in trong công cụ ngắt kết nối ngắt kết nối. Bây giờ, bạn nên ghi đè hành vi mặc định để phát quảng cáo gần với thời gian seekFrom hơn.

10. Xin chúc mừng

Giờ đây, bạn đã biết cách thêm quảng cáo vào ứng dụng receiver bằng SDK Cast Receiver mới nhất.

Để biết thêm thông tin chi tiết, hãy xem Hướng dẫn dành cho nhà phát triển về Điểm chèn quảng cáo.