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

François Beaufort
François Beaufort
GitHub

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 pin đối với nội dung nghe nhìn được mã hoá hay không.
  • Hỗ trợ gợi ý thuộc tính playsInline của phần tử video.

Phương tiệ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 Giải mã thông tin để 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 các thông tin như bộ mã hoá và giải mã, hồ sơ, độ phân giải, tốc độ bit, v.v. Dữ liệu này cho biết quá trình phát có mượt mà (đúng thời điểm) và tiết kiệm điện năng dựa trên số liệu thống kê về lượt phát trước đó do trình duyệt ghi lại.

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

Tóm lại, đây là cách giải mã thông tin cho EME hoạt động. Hãy dùng thử 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 lượt phát EME có đường dẫn mã kết xuất và giải mã chuyên biệt, nghĩa là khả năng hỗ trợ và hiệu suất của bộ mã hoá và giải mã khác với các lượt 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 đã 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. Việc này sẽ sao chép dữ liệu đầu vào được cung cấp cho requestMediaKeySystemAccess() của EME với một điểm khác biệt chính: trình tự các đầu vào cung cấp cho requestMediaKeySystemAccess() sẽ được làm phẳng thành một giá trị duy nhất bất cứ khi nào mục đích của trình tự là yêu cầu 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ả điện năng) hỗ trợ cho 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 phải sắp xếp thứ tự các cấu hình nội dung nghe nhìn như với requestMediaKeySystemAccess(). Nhưng giờ đây, họ tự mình tìm kiếm.

navigator.mediaCapabilities.decodingInfo() trả về một lời hứa sẽ phân giải không đồng bộ với một đối tượng chứa 3 giá trị boolean: supported, smooth và powerEfficient. Tuy nhiên, khi khoá keySystemConfiguration được đặt và supported là true, một đối tượng MediaKeySystemAccess khác có tên là keySystemAccess cũng được trả về. Bạn có thể dùng khoá này để yêu cầu một số phím nội dung nghe nhìn và thiết lập tính năng 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.

Hơn nữa, hãy lưu ý rằng tính năng này có thể kích hoạt lời nhắc cho người dùng trên Android và ChromeOS theo cách giống như requestMediaKeySystemAccess(). Tuy nhiên, lệnh này sẽ không hiển thị nhiều lời nhắc hơn requestMediaKeySystemAccess(), mặc dù bạn 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á.

ALT_TEXT_HERE
Lời nhắc về nội dung được bảo vệ

Ý định để thử nghiệm | Công cụ theo dõi trạng thái của Chrome | Lỗi Chromium

HTMLVideoElement.playsInline

Chrome hiện hỗ trợ thuộc tính boolean playsInline. Nếu có, theo mặc định, trình duyệt sẽ gợi ý cho trình duyệt rằng video phải hiển thị "cùng dòng" trong tài liệu, bị hạn chế với 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ố cục để 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 | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium