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 nhận web tuỳ chỉnh sử dụng API Điểm chèn quảng cáo truyền.

Google Cast là gì?

Google Cast cho phép người dùng truyền nội dung từ thiết bị di động tới 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 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 Cast 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ế của Google Cast.

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 Cast nhằm giúp trải nghiệm của người dùng trở nên trực quan trên tất cả các nền tảng được hỗ trợ.

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

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

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 như Lưu trữ Firebase hoặc ngrok.
  • Một thiết bị Google Cast như Chromecast hoặc Android TV được định cấu hình có kết nối 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ó được trải 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 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ó thể đọc Đọ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?

Người mới tập 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 receiver 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 đế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ụ mà mình muốn, hãy chuyển đến app-start rồi khởi động máy chủ.

Ghi lại URL của dịch vụ nhận được lưu trữ. Bạn sẽ dùng tính năng 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 tuỳ chỉnh (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 của mình, một ID ứng dụng sẽ được tạo, trong đó ứng dụng Người gửi phải được định cấu hình để khởi chạy ứng dụng Web Nhận.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK Google Cast với dòng chữ "Add New Application" (Thêm ứng dụng mới) nút được làm nổi bật

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

Hình ảnh "Ứng dụng bộ thu mới" có màn hình "Custom receiver" (Bộ thu tuỳ chỉnh) đã làm nổi bật lựa chọn

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 "Bộ thu tuỳ chỉnh mới" màn hình hiển thị URL mà ai đó đang nhập vào 'URL ứng dụng nhận thư' trường

Nhập thông tin chi tiết về thiết bị nhận mới. Hãy đảm bảo sử dụng URL trỏ tới nơi bạn dự định lưu trữ ứng dụng Trình nhận 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 nhận tín hiệu trước khi bạn xuất bản. 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. Đối với 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 ứng dụng receiver chưa được xuất bản.

Hình ảnh Bảng điều khiển dành cho nhà phát triển SDK Google Cast với dòng chữ "Add New Device" (Thêm thiết bị mới) nút được làm nổi bật

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

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

Nhập số sê-ri in ở mặt sau của Thiết bị truyền và đặt tên mô tả cho số sê-ri đó. 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 vào Google Cast SDK Developer Console

Sẽ mất 5-15 phút để thiết bị nhận và thiết bị của bạn sẵn sàng cho việc kiểm tra. Sau khi đợi 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ị bắt đầu dự án

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. Hướng dẫn này cung cấp thông tin tổng quan về các API điểm chèn quảng cáo.

Cần thêm tính năng hỗ trợ cho Google Cast vào ứng dụng khởi động mà bạn đã tải xuống. Dưới đây là một số thuật ngữ của Google Cast được sử 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 receiver (trình thu 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 mã mẫu mà bạn tải xuống.
  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à bạn chọn để phù hợp với các thay đổi đã thực hiện. Đả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 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 API điểm chèn quảng cáo.

Trong lớp học lập trình này, Cast and Command Tool (Công cụ truyền và lệnh) sẽ đóng vai trò là Web Sender để khởi 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 ID ứng dụng nhận mà bạn được cấp trên Bảng điều khiển dành cho nhà phát triển SDK truyền rồi nhấp vào Đặt để định cấu hình ứng dụng 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 Bộ nhận 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 làm 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 nhận là trọng tâm của lớp học lập trình này, bao gồm một khung 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 thông tin này được mô tả kỹ 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 nhận của chúng tôi do phần tử cast-media-player cung cấp. SDK 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, lớp này chứa một trình thu nhận CAF cơ bản để khởi chạy ngữ cảnh truyền và tải một thành phần video khi khởi chạy. Chúng tôi cũng bổ sung một số tính năng của trình ghi nhật ký gỡ lỗi để 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 bộ nhận web truyền hỗ trợ các quảng cáo được chỉ định thông qua Danh sách quảng cáo nhiều quảng cáo trong 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 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 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ị 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 tạo ra mẫu XML 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 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 nên phát, theo 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 làm nổi 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 được 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 đây 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 ngắt VAST từ DoubleClick và một giá trị correlator ngẫu nhiên. Các đoạn video chèn này có 5 điểm chèn. position của mỗi điểm chèn quảng cáo được đặt thành một khoảng 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 trước video (position được đặt thành 0) và 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 điểm chèn quảng cáo là một mảng có nghĩa là bạn có thể gán nhiều đoạn chèn quảng cáo 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. Xin lưu ý rằng phần 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 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 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 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 có tên là BreakManager để hỗ trợ bạn triển khai các quy tắc kinh doanh tuỳ chỉnh cho các 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 khoảng nghỉ và ngắt các đoạn video theo phương thức lập trình 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 ở 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 trong video (ở thời lượng 15, 60 và 100 giây) và cuối cùng là 1 điểm chèn sau video. Sau khi bạn hoàn thành các bước này, chỉ quảng cáo trước video và quảng cáo trong video có vị trí ở vị trí 15 giây mới bị bỏ qua.

Để thực hiện điều này, ứng dụng phải gọi các API có sẵn thông qua BreakManager để thiết lập trình 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 để lấy thông tin tham chiếu đến thực thể đó.

const breakManager = playerManager.getBreakManager();

Ứng dụng nên 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 xuất hiện trước 30 giây, đồng thời cần lưu ý đến mọi điểm chèn sau video (vì giá trị position của các điểm chèn này là -1). Bộ chặn này hoạt động giống như bộ chặn TẢI trên PlayerManager, ngoại trừ bộ chặn này dành riêng cho việc tải các đoạn chèn quảng cáo. Hãy thiết lập chế độ này sau trình 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 có bất kỳ đoạn chèn quảng cáo nào được xác định thì điểm chèn quảng cáo sẽ bị bỏ qua.

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.

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

Khi tìm các điểm ngắt trước đây, phương thức triển khai mặc định sẽ lấy mọi 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 điểm chèn này, SDK sẽ phát Break có position gần với giá trị seekTo nhất và có 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 bạn xem ngắt, 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 thì sẽ không phát điểm chèn quảng cáo và nội dung chính sẽ tiếp tục phát ở vị trí seekTo.

Để tuỳ chỉnh những điểm ngắt sẽ phát khi tua, SDK Truyền 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 đó mỗi khi một thao tác tìm kiếm được thực hiện qua một hoặc nhiều điểm chèn. 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 bên dưới sẽ ghi đè hành vi mặc định bằng cách lấy tất cả các khoảng nghỉ bạn đã tìm kiếm và chỉ phát khung giờ đầu tiên xuất hiện trong dòng thời gian.

Sao chép nội dung sau đây vào tệp js/receiver.js theo đị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ề 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 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.

Hãy đợi thời gian phát đạt 30 giây để vượt qua tất cả các điểm chèn mà trình chặn tải đoạn video bỏ qua. Sau khi đạt đến vị trí mong muốn, hãy gửi lệnh tìm kiếm 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. Hành vi mặc định hiện sẽ được ghi đè để phát điểm chèn 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 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 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.