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

François Beaufort
François Beaufort
GitHub

Media Capabilities – Decoding Info API

Ngày nay, các nhà phát triển web dựa vào isTypeSupported() hoặc canPlayType() để biết một cách mơ hồ liệu một số nội dung nghe nhìn có thể được giải mã hay không. Tuy nhiên, câu hỏi thực sự cần đặt ra là: "thiết bị này sẽ hoạt động hiệu quả đến mức nào?"

Đây chính xác là một trong những điều mà Media Capabilities (Khả năng của nội dung nghe nhìn) được đề xuất muốn giải quyết: một API để truy vấn trình duyệt về khả năng giải mã của thiết bị dựa trên thông tin như codec, hồ sơ, độ phân giải, tốc độ bit, v.v. API này sẽ hiển thị thông tin như liệu quá trình phát có mượt mà và tiết kiệm điện 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.

Tóm lại, hiện tại Decoding Info API hoạt động như sau. Hãy xem mẫu chính thức.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  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
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

Bạn có thể thử nhiều cấu hình nội dung nghe nhìn cho đến khi tìm được cấu hình phù hợp nhất (smooth và powerEfficient) rồi dùng cấu hình đó để phát luồng nội dung nghe nhìn thích hợp. Nhân tiện, chế độ triển khai hiện tại của Chrome dựa trên thông tin phát lại đã ghi trước đó. Nó xác định smooth là đúng khi tỷ lệ phần trăm khung hình bị rớt nhỏ hơn 10%, trong khi powerEfficient là đúng khi phần cứng giải mã hơn 50% khung hình. Các khung hình nhỏ luôn được coi là tiết kiệm điện.

Bạn nên sử dụng một đoạn mã tương tự như đoạn mã dưới đây để phát hiện tính khả dụng và quay lại cách triển khai hiện tại cho những trình duyệt không hỗ trợ API này.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

Có sẵn cho bản dùng thử theo nguyên gốc

Để thu thập được nhiều phản hồi nhất có thể từ các nhà phát triển sử dụng Decoding Info API (một phần của Media Capabilities) tại hiện trường, trước đây, chúng tôi đã thêm tính năng này vào Chrome 64 dưới dạng một bản dùng thử theo nguyên gốc.

Giai đoạn dùng thử đã kết thúc thành công vào tháng 4 năm 2018.

Ý định thử nghiệm | Ý định phát hành | Trình theo dõi trạng thái của Chrome | Lỗi Chromium

Phát video HDR trên Windows 10

Video có Dải động cao (HDR) có độ tương phản cao hơn, cho thấy bóng đổ chính xác, chi tiết và vùng sáng nổi bật với độ rõ nét hơn bao giờ hết. Ngoài ra, việc hỗ trợ gam màu rộng có nghĩa là màu sắc sẽ sống động hơn.

So sánh SDR mô phỏng với HDR (bạn cần có màn hình HDR để xem HDR thực)
So sánh SDR và HDR mô phỏng (bạn cần có màn hình HDR để xem HDR thực)

Vì Chrome hiện hỗ trợ tính năng phát VP9 Cấu hình 2 10 bit cho Windows 10 Fall Creator Update, nên Chrome cũng hỗ trợ tính năng phát video HDR khi Windows 10 ở chế độ HDR. Về mặt kỹ thuật, Chrome 64 hiện hỗ trợ hồ sơ màu scRGB, nhờ đó cho phép nội dung nghe nhìn phát ở chế độ HDR.

Bạn có thể thử bằng cách xem video The World in HDR in 4K (ULTRA HD) trên YouTube và kiểm tra xem video có phát ở chế độ HDR hay không bằng cách xem chế độ cài đặt chất lượng của trình phát YouTube.

Chế độ cài đặt chất lượng của trình phát YouTube có HDR
Chế độ cài đặt chất lượng của trình phát YouTube có HDR

Hiện tại, bạn chỉ cần có Windows 10 Fall Creator Update, một card đồ hoạ và màn hình tương thích với HDR (ví dụ: card NVIDIA dòng 10, TV hoặc màn hình HDR của LG) và bật chế độ HDR trong phần cài đặt màn hình của Windows.

Nhà phát triển web có thể phát hiện gam màu gần đúng mà thiết bị đầu ra hỗ trợ bằng truy vấn nội dung nghe nhìn về gam màu gần đây và số lượng bit dùng để hiển thị màu trên màn hình bằng screen.colorDepth. Dưới đây là một cách sử dụng các thông tin đó để phát hiện xem VP9 HDR có được hỗ trợ hay không, chẳng hạn:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

Bạn cần cập nhật chuỗi bộ mã hoá và giải mã VP9 có Cấu hình 2 được truyền đến isTypeSupported() trong ví dụ trên dựa trên các thuộc tính mã hoá video của bạn.

Xin lưu ý rằng bạn chưa thể xác định màu HDR trong CSS, canvas, hình ảnh và nội dung được bảo vệ. Nhóm Chrome đang nỗ lực khắc phục vấn đề này. Hãy tiếp tục theo dõi!

Giấy phép vĩnh viễn cho Windows và Mac

Giấy phép cố định trong Encrypted Media Extensions (EME) có nghĩa là giấy phép có thể được duy trì trên thiết bị để các ứng dụng có thể tải giấy phép vào bộ nhớ mà không cần gửi một yêu cầu cấp giấy phép khác đến máy chủ. Đây là cách EME hỗ trợ tính năng phát ngoại tuyến.

Cho đến nay, ChromeOS và Android là những nền tảng duy nhất hỗ trợ giấy phép cố định. Điều này không còn đúng nữa. Giờ đây, bạn cũng có thể phát nội dung được bảo vệ thông qua EME khi thiết bị không kết nối mạng trong Chrome 64 trên Windows và Mac.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

Bạn có thể tự mình dùng thử giấy phép duy trì bằng cách xem PWA đa phương tiện mẫu và làm theo các bước sau:

  1. Truy cập vào https://biograf-155113.appspot.com/ttt/episode-2/
  2. Nhấp vào "Cho phép sử dụng khi không có mạng" rồi chờ video tải xuống.
  3. Tắt kết nối Internet.
  4. Nhấp vào nút "Phát" và thưởng thức video!

Chế độ tải trước nội dung nghe nhìn mặc định là "metadata"

Để phù hợp với các phương thức triển khai của trình duyệt khác, Chrome trên máy tính hiện đặt giá trị tải trước mặc định cho các phần tử <video> và <audio> thành "metadata" để giảm mức sử dụng băng thông và tài nguyên. Kể từ Chrome 64, hành vi mới này chỉ áp dụng cho những trường hợp không đặt giá trị tải trước. Xin lưu ý rằng gợi ý của thuộc tính tải trước sẽ bị loại bỏ khi MediaSource được đính kèm vào phần tử đa phương tiện vì trang web tự xử lý quá trình tải trước.

Nói cách khác, giá trị tải trước <video> hiện là "metadata" trong khi giá trị tải trước <video preload="auto"> vẫn là "auto". Hãy dùng thử mẫu chính thức.

Intent to Ship | Chromestatus Tracker | Chromium Bug

playbackRate không được hỗ trợ sẽ gây ra một ngoại lệ

Sau thay đổi về quy cách HTML, khi playbackRate của các phần tử đa phương tiện được đặt thành một giá trị mà Chrome không hỗ trợ (ví dụ: giá trị âm), thì "NotSupportedError" DOMException sẽ được truyền trong Chrome 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

Nhân tiện, cách triển khai hiện tại của Chrome sẽ tạo ra ngoại lệ này khi playbackRate là số âm, nhỏ hơn 0, 0625 hoặc lớn hơn 16. Hãy thử mẫu chính thức để xem tính năng này hoạt động.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Tối ưu hoá các bản video ở chế độ nền

Nhóm Chrome luôn cố gắng tìm ra những cách mới để cải thiện thời lượng pin và Chrome 63 cũng không ngoại lệ.

Nếu không có bản âm thanh, video sẽ tự động tạm dừng khi phát ở chế độ nền (ví dụ: trong một thẻ không hiển thị) trên Chrome dành cho máy tính (Windows, Mac, Linux và ChromeOS). Đây là bước tiếp theo của một thay đổi tương tự chỉ áp dụng cho video MSE trong Chrome 62.

Lỗi Chromium

Xoá chế độ tắt tiếng đối với playbackRate cực cao

Trước Chrome 64, âm thanh sẽ bị tắt tiếng khi playbackRate dưới 0,5 hoặc trên 4 vì chất lượng giảm đáng kể. Vì Chrome đã chuyển sang phương pháp Waveform-Similarity-Overlap-Add (WSOLA) để giảm chất lượng, nên âm thanh không cần phải tắt tiếng nữa. Điều này có nghĩa là giờ đây, bạn có thể phát âm thanh ở tốc độ cực chậm và cực nhanh.

Lỗi Chromium