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 Truyền điểm chèn quảng cáo.

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ể sử dụng thiết bị di động làm điều khiển từ xa để phát nội dung đa phương tiện trên TV.

Google Cast SDK 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. Cast SDK 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 của Google Cast Design.

Danh sách kiểm tra thiết kế Google Cast được cung cấp để chuẩn hóa các quá trình triển khai Truyền 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 tôi sẽ xây dựng những gì?

Sau khi hoàn thành lớp học lập trình này, bạn sẽ xây dựng được một Trình thu phát nội dung truyền để 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 để truyền
  • Cách bỏ qua đoạn ngắt
  • Cách tuỳ chỉnh hành vi chèn quảng cáo 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 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 rằng bạn đã có được những trải nghiệm dưới đâ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 các ứ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 các bài tập

Bạn đánh giá thế nào về trải nghiệm của mình trong quá trình tạo ứng dụng web?

Người mới bắt đầu 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...

rồi giải nén tệp zip đã tải xuống.

3. Triển khai bộ thu cục bộ

Để có thể sử dụng bộ thu web bằng Thiết bị truyền, thiết bị này cần được lưu trữ ở nơi 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 các 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 Lưu trữ Firebase hoặc ngrok.

Chạy máy chủ

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

Ghi lại URL của thiết bị nhận được lưu trữ. Bạn sẽ dùng phương pháp này trong phần tiếp theo.

4. Đăng ký ứng dụng trong Cast Developer Console

Bạn phải đăng ký ứng dụng của mình để có thể chạy trình thu nhận tuỳ chỉnh (được tích hợp sẵn trong lớp học lập trình này) trên thiết bị Chromecast. Sau khi bạn đăng ký ứng dụng, một ID ứng dụng sẽ được tạo, trong đó phải định cấu hình Ứng dụng người gửi để khở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 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 mới nhận), trong đó tuỳ chọn "Custom receiver" (Bộ thu tuỳ chỉnh) được làm nổi bật

Chọn "Trình thu tuỳ chỉnh", đây là những gì chúng ta đang xây dựng.

Hình ảnh màn hình "New Custom receiver" (Trình thu tuỳ chỉnh mới) cho thấy một URL mà người nào đó đang nhập vào trường "Receiver Application URL" (URL ứng dụng của người nhận)

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

Bạn cũng phải đăng ký thiết bị Google Cast để thiết bị này có thể truy cập vào ứng dụng của thiết bị thu trước khi bạn xuất bản. Sau khi bạn phát hành ứng dụng nhận, ứng dụng đó sẽ có trên tất cả thiết bị Google Cast. Để phục vụ 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 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 "Add Cast receiver Device" (Thêm thiết bị nhận Cast)

Nhập số sê-ri in ở mặt sau của Thiết bị truyền và đặt tên mang tính mô tả. Bạn cũng có thể tìm thấy số sê-ri của mình bằng cách truyền màn hình trong Chrome khi truy cập Google Cast SDK Developer Console

Sẽ mất 5-15 phút để thiết bị nhận và thiết bị sẵn sàng kiểm tra. Sau khi chờ 5-15 phút, bạn phải khởi động lại thiết bị Truyền của mình.

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 cho nhà phát triển quảng cáo, trong đó cung cấp thông tin tổng quan về các 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 ban đầu mà bạn tải xuống. Sau đây là một số thuật ngữ về Google Cast được dùng trong lớp học lập trình này:

  • một ứng dụng của người gửi chạy trên thiết bị di động hoặc máy tính xách tay,
  • một ứng dụng broadcast receiver chạy trên thiết bị Google Cast.

Giờ đây, bạn đã sẵn sàng để xây dựng dựa trên dự án khởi đầu bằng cách sử dụ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 mã mẫu xuống.
  2. Mở js/receiver.js và index.html

Lưu ý: Trong quá trình thực hiện lớp học lập trình này, bạn nên cập nhật các thay đổi đã thực hiện với giải pháp lưu trữ web mà bạn đã chọn. Đảm bảo rằng bạn đang áp dụng các thay đổi vào trang web lưu trữ khi tiếp tục xác thực và thử nghiệm 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 ứng dụng của người gửi để bắt đầu Phiên truyền, và ứ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à Web Sender để 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 người nhận mà bạn được cấp trên Bảng điều khiển dành cho nhà phát triển Cast SDK và nhấp vào Đặt để định cấu hình ứng dụng của người gửi nhằm 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 Bộ 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 thao tác này, hãy bật/tắt nguồn cho mọi thiết bị truyền vừa đăng ký.

Ứng dụng 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. Những điều này được mô tả kỹ hơn dưới đây.

index.html

Tệp html này chứa giao diện người dùng cho ứng dụng nhận do phần tử cast-media-player cung cấp. Bộ công cụ này cũng tải các thư viện CAF SDK và Trình ghi nhật ký 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 thành phần video khi khởi chạy. Một số chức năng của trình ghi nhật ký gỡ lỗi cũng đã được thêm vào để cung cấp tính năng ghi nhật ký trở lại công cụ Cast và Command.

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

SDK Cast Web receiver cung cấp tính năng hỗ trợ cho các 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 các điểm chèn quảng cáo của nội dung nghe nhìn và siêu dữ liệu của đoạn chèn quảng cáo có liên quan. Để chèn những 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 yêu cầu chặn và thay thế bằng mã dưới đây. Tệp này chứa URL thẻ VMAP mẫu từ DoubleClick và cung cấp giá trị correlator ngẫu nhiên để đảm bảo rằng các yêu cầu tiếp theo đến cùng một URL sẽ tạo mẫu XML có các điểm chèn quảng cáo chưa được 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 vào js/receiver.js rồi tải tệp này lên máy chủ web của bạn. Bắt đầu một 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 VMAP (Danh sách phát video nhiều quảng cáo) nên phát, tiếp đến là nội dung chính.

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

Như đã đề cập trước đó, SDK hỗ trợ nhiều loại quảng cáo trong SDK bộ nhận trên web. 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 ở phần trước, hãy nhận xét về mã đó.

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 6 đoạn chèn quảng cáo VAST từ DoubleClick và một giá trị correlator ngẫu nhiên. Những đoạn ngắt này được gán cho 5 điểm chèn quảng cáo. Hệ thống đặt position của mỗi điểm chèn quảng cáo 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 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 là một mảng, có nghĩa là bạn có thể gán nhiều điểm chèn cho mỗi điểm chèn.

Trong js/receiver.js file, hãy tìm trình chặn thông báo TẢI và thay thế bằng mã sau. Lưu ý rằng công việc VMAP (Danh sách phát video nhiều quảng cáo) được nhận xét để hiển thị quảng cáo thuộc 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 này lên máy chủ web của bạn. Bắt đầu một 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 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, lớp này 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 ứng dụng lập trình để bỏ qua điểm chèn và ngắt đoạn video dựa trên một số điều kiện. Ví dụ này cho thấy 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, nhưng không phải là điểm chèn cuối 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 được xác định: 1 điểm chèn trước video, 3 điểm chèn giữa video (15, 60 và 100 giây) và cuối cùng là 1 điểm chèn sau video. Sau khi hoàn tất các bước, hệ thống chỉ bỏ qua các quảng cáo trước video và giữa video có vị trí 15 giây.

Để làm như vậy, ứng dụng phải gọi các API có sẵn thông qua BreakManager để thiết lập yếu tố chặn cho quá trình tải 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ể này.

const breakManager = playerManager.getBreakManager();

Ứng dụng nên thiết lập 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 trong khi vẫn lưu ý mọi điểm chèn sau video (vì giá trị position của chúng là -1). Trình chặn này hoạt động như trình chặn TẢI trên PlayerManager, ngoại trừ điểm chèn này dành riêng cho việc tải các đoạn ngắt. Đặt thuộc tính này sau giao diện chặn yêu cầu TẢI và trước phần khai báo hàm addVASTBreaksToMedia.

Sao chép nội dung sau đây 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 xác định được điểm chèn nào, thì chính điểm chèn đó sẽ bị bỏ qua.

Lưu các thay đổi vào js/receiver.js rồi tải tệp này lên máy chủ web của bạn. Bắt đầu một 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 phải được xử lý. Xin lưu ý rằng quảng cáo trước video và giữa 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 chèn quảng cáo

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

Để tuỳ chỉnh thời điểm ngắt quảng cáo sẽ phát khi tua, SDK truyền sẽ 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 này bất cứ khi nào thao tác tìm kiếm được thực hiện qua một hoặc nhiều điểm ngắt. 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.

Để cho thấy cách sử dụng, mẫu dưới đây ghi đè hành vi mặc định bằng cách lấy tất cả điểm chèn đã tìm kiếm và chỉ phát điểm chèn quảng cáo đầu tiên xuất hiện trong dòng thời gian.

Sao chép nội dung sau vào tệp js/receiver.js theo phần định nghĩa vào 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ề một giá trị hoặc trả về null, thì sẽ không có điểm chèn nào được phát.

Lưu các thay đổi vào js/receiver.js rồi tải tệp này lên máy chủ web của bạn. Bắt đầu một 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 phải được xử lý. Xin lưu ý rằng quảng cáo trước video và giữa video đầu tiên (có position là 15 giây) không được phát.

Chờ thời gian phát đạt 30 giây để vượt qua tất cả các điểm chèn bị trình chặn tải của đoạn ngắt bỏ qua. Sau khi truy cập, hãy gửi một lệnh tìm kiếm bằng cách chuyển đến thẻ Điều khiển nội dung nghe nhìn. Điền dữ liệu đầu vào Seek Into Media (Tìm kiếm nội dung đa phương tiện) bằng 300 giây rồi nhấp vào nút TO. Hãy lưu ý rằng nhật ký được in trong Break Find Interceptor (Chỉ định ngắt dịch vụ). Giờ đây, hành vi mặc định sẽ được ghi đè để phát điểm chèn quảng cáo gần với thời gian seekFrom.

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 bộ thu bằng cách sử dụng SDK Bộ thu truyền mới nhất.

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