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

Chức năng đa phương tiện – Giải mã thông tin API

Hiện nay, các nhà phát triển web dựa vào isTypeSupported() hoặc canPlayType() để dám mơ hồ biết 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ự là: "sẽ hoạt động hiệu quả như thế nào trên thiết bị này?"

Đây chính xác là một trong những vấn đề mà Media Capabilities (Chức năng đa phương tiện) đề 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ư bộ mã hoá và giải mã, 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 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.

Tóm lại, sau đây là cách hoạt động của API Thông tin giải mã hiện tại. 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 thấy cấu hình phù hợp nhất (smoothpowerEfficient) và sử dụng cấu hình đó để phát luồng nội dung nghe nhìn thích hợp. Nhân tiện, cách triển khai hiện tại của Chrome dựa trên thông tin phát đã ghi lại trước đó. Phương thức này xác định smooth là đúng khi tỷ lệ phần trăm khung hình bị bỏ qua dưới 10%, trong khi powerEfficient là đúng khi phần cứng giải mã hơn 50% khung hình. Khung nhỏ luôn được coi là tiết kiệm pin.

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 khả năng sử dụng và quay lại phương thức triển khai hiện tại cho các 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ó trong bản dùng thử theo nguyên gốc

Để nhận được nhiều ý kiến phản hồi nhất có thể từ các nhà phát triển đang dùng API Thông tin giải mã (một phần của Chức năng đa phương tiện) trong trường này, trước đây, chúng tôi đã thêm tính năng này trong Chrome 64 dưới dạng bản dùng thử theo nguyên gốc.

Chương trình 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 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à các điểm sáng ấn tượng với độ rõ nét cao hơn bao giờ hết. Ngoài ra, việc hỗ trợ gam màu rộng đồng nghĩa với việc màu sắc trở nên rực rỡ 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 sự)
So sánh SDR mô phỏng và HDR (để xem HDR chân thực, cần có màn hình HDR)

Vì tính năng phát 10 bit theo Cấu hình VP9 2 hiện được hỗ trợ trong Chrome cho Bản cập nhật Fall Creator của Windows 10, 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 phát nội dung nghe nhìn ở chế độ HDR.

Bạn có thể thử bằng cách xem The World in HDR in 4K (ULTRA HD) (Thế giới trong HDR ở chất lượng 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ó hỗ trợ HDR

Hiện tại, bạn chỉ cần có Bản cập nhật Windows 10 cho người sáng tạo mùa thu, một thẻ đồ hoạ và màn hình tương thích HDR (ví dụ: thẻ NVIDIA 10- Series, TV hoặc màn hình LG HDR) và bật chế độ HDR trong phần cài đặt màn hình của Windows.

Các 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 color-gamut gần đây và số bit được dùng để hiển thị một 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 số đó để phát hiện xem VP9 HDR có được hỗ trợ hay không, chẳng hạn như:

// 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 với 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 xử lý vấn đề này. Hãy tiếp tục theo dõi!

Giấy phép ổn định cho Windows và Mac

Giấy phép ổn định trong Encrypted Media Extensions (EME) (Tiện ích nội dung đa phương tiện được mã hoá) có nghĩa là giấy phép có thể được lưu 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 yêu cầu cấp phép khác đến máy chủ. Đây là cách hỗ trợ tính năng phát ngoại tuyến trong EME.

Cho đến nay, ChromeOS và Android là những nền tảng duy nhất hỗ trợ giấy phép ổn đị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ệ qua EME khi thiết bị không có kết nối mạng trong Chrome 64 trên Windows và máy 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ự thử giấy phép ổn định bằng cách xem PWA nội dung nghe nhì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" để thưởng thức video!

Tải trước nội dung nghe nhìn mặc định là "siêu dữ liệu"

Để phù hợp với cách triển khai của các trình duyệt khác, Chrome phiên bản dành cho máy tính hiện đặt giá trị tải trước mặc định cho các phần tử <video><audio> thành "metadata" nhằm giảm băng thông và mức sử dụng tài nguyên. Kể từ Chrome 64, hành vi mới này chỉ áp dụng cho các trường hợp chưa đặ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ử nội dung nghe nhìn vì trang web sẽ xử lý việc tải trước của riêng nó.

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 thử nghe mẫu chính thức.

Ý định phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Phát lại tỷ lệ phát không được hỗ trợ tăng một ngoại lệ

Sau khi thay đổi quy cách HTML, khi playbackRate của phần tử nội dung đa phương tiện được đặt thành một giá trị không được Chrome hỗ trợ (ví dụ: giá trị âm), "NotSupportedError" DOMException sẽ được gửi vào 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 trường hợp ngoại lệ này khi playbackRate âm, nhỏ hơn 0,0625 hoặc lớn hơn 16. Hãy thử mẫu chính thức để xem cách hoạt động của tính năng này.

Ý định phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium

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

Nhóm Chrome luôn tìm cách cải thiện thời lượng pin và Chrome 63 cũng không ngoại lệ.

Nếu không chứa bản âm thanh nào, 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ị) trong Chrome trên máy tính (Windows, Mac, Linux và ChromeOS). Đây là phần 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 tốc độ phát cực cao

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

Lỗi Chromium