Các bản cập nhật về nội dung nghe nhìn trong Chrome 75

François Beaufort

Các tính năng đa phương tiện của Chrome đã được cập nhật trong phiên bản 75. Trong bài viết này, tôi sẽ thảo luận về các tính năng mới đó, bao gồm:

• Dự đoán xem quá trình phát có mượt mà và tiết kiệm điện năng đối với nội dung nghe nhìn đã mã hoá hay không.
• Hỗ trợ gợi ý thuộc tính playsInline của phần tử video.

Nội dung nghe nhìn đã mã hoá: Thông tin giải mã

Kể từ Chrome 66, các nhà phát triển web đã có thể sử dụng Thông tin giải mã để truy vấn trình duyệt về khả năng giải mã nội dung rõ ràng của thiết bị dựa trên thông tin như bộ mã hoá và giải mã, hồ sơ, độ phân giải, tốc độ bit, v.v. Thông tin này cho biết liệu quá trình phát có diễn ra mượt mà (kịp thời) và tiết kiệm pin hay không dựa trên số liệu thống kê về quá trình phát trước đó do trình duyệt ghi lại.

Kể từ đó, thông số kỹ thuật Media Capabilities API (API chức năng đa phương tiện) xác định Thông tin giải mã cũng được cập nhật để xử lý các cấu hình nội dung đa phương tiện được mã hoá, nhờ đó, các trang web sử dụng nội dung đa phương tiện được mã hoá (EME) có thể chọn luồng nội dung đa phương tiện tối ưu.

Tóm lại, sau đây là cách hoạt động của Thông tin giải mã cho EME. Hãy thử dùng mẫu chính thức.

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

Các bản phát EME có các đường dẫn mã giải mã và kết xuất chuyên biệt, nghĩa là có hiệu suất và khả năng hỗ trợ bộ mã hoá và giải mã khác so với các bản phát rõ ràng. Do đó, bạn phải đặt khoá keySystemConfiguration mới trong đối tượng cấu hình nội dung nghe nhìn được truyền đến navigator.mediaCapabilities.decodingInfo(). Giá trị của khoá này là một từ điển chứa một số loại EME phổ biến. Thao tác này sẽ sao chép các giá trị đầu vào được cung cấp cho requestMediaKeySystemAccess() của EME với một điểm khác biệt lớn: các trình tự đầu vào được cung cấp cho requestMediaKeySystemAccess() được làm phẳng thành một giá trị duy nhất bất cứ khi nào ý định của trình tự là để requestMediaKeySystemAccess() chọn một tập hợp con mà nó hỗ trợ.

Thông tin giải mã mô tả chất lượng (độ mượt và hiệu quả nguồn điện) hỗ trợ một cặp luồng âm thanh và video duy nhất mà không cần đưa ra quyết định cho phương thức gọi. Phương thức gọi vẫn nên đặt hàng cấu hình nội dung nghe nhìn như khi đặt hàng với requestMediaKeySystemAccess(). Chỉ bây giờ, chúng tự đi qua danh sách.

navigator.mediaCapabilities.decodingInfo() trả về một lời hứa phân giải không đồng bộ với một đối tượng chứa ba boolean: supported, smooth và powerEfficient. Tuy nhiên, khi bạn đặt khoá keySystemConfiguration và supported là true, một đối tượng MediaKeySystemAccess khác có tên keySystemAccess cũng được trả về. Bạn có thể dùng API này để yêu cầu một số khoá phương tiện và thiết lập chế độ phát nội dung nghe nhìn đã mã hoá. Ví dụ:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

Xin lưu ý rằng thông tin giải mã cho nội dung nghe nhìn đã mã hoá yêu cầu giao thức HTTPS.

Ngoài ra, hãy lưu ý rằng thao tác này có thể kích hoạt lời nhắc của người dùng trên Android và ChromeOS theo cách giống như requestMediaKeySystemAccess(). Tuy nhiên, ứng dụng này sẽ không hiển thị nhiều lời nhắc hơn requestMediaKeySystemAccess(), mặc dù cần nhiều lệnh gọi hơn để thiết lập tính năng phát nội dung nghe nhìn đã mã hoá.

Ý định thử nghiệm | Trình theo dõi trạng thái Chrome | Lỗi Chromium

HTMLVideoElement.playsInline

Chrome hiện hỗ trợ thuộc tính boolean playsInline. Nếu có, thuộc tính này sẽ gợi ý cho trình duyệt rằng video nên được hiển thị ở chế độ "nội tuyến" trong tài liệu theo mặc định. Đồng thời, thuộc tính này bị ràng buộc trong khu vực phát của phần tử.

Tương tự như Safari, trong đó các thành phần video trên iPhone không tự động chuyển sang chế độ toàn màn hình khi bắt đầu phát, gợi ý này cho phép một số trình nhúng có trải nghiệm phát video tự động ở chế độ toàn màn hình. Nhà phát triển web có thể sử dụng báo cáo này để chọn không sử dụng trải nghiệm này (nếu cần).

<video playsinline></video>

Vì Chrome trên Android và máy tính không triển khai chế độ tự động toàn màn hình, nên gợi ý thuộc tính phần tử video playsInline sẽ không được sử dụng.

Ý định gửi hàng | Trình theo dõi Chromestatus | Lỗi Chromium