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

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 ít khi dựa vào isTypeSupported() hoặc canPlayType() biết liệu một số phương tiện có thể được giải mã hay không. Tuy nhiên, câu hỏi thực sự là: "tính năng này 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 điều mà Khả năng truyền thông đề 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ã, cấu hình, độ phân giải, tốc độ bit, v.v. 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 dựa trên số liệu thống kê phát lại 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ã. 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 thiết bị này để phát nội dung nghe nhìn thích hợp luồng. 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 lại được ghi lại. Định nghĩa smooth là true khi tỷ lệ phần trăm tỷ lệ khung hình bị rớt là dưới 10% trong khi powerEfficient là true khi có nhiều hơn hơn 50% khung hình được phần cứng giải mã. Khung hình nhỏ luôn được coi là tiết kiệm điện năng.

Tôi khuyê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 khả năng sử dụng và quay lại 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ó cho bản dùng thử theo nguyên gốc

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

Thử nghiệm đã kết thúc thành công vào tháng 4 năm 2018.

Ý định thử nghiệm | Ý định gửi hàng | 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, hiển thị chính xác, bóng chi tiết và vùng sáng tuyệt đẹp với độ rõ nét hơn bao giờ hết. Hơn nữa hỗ trợ gam màu rộng nghĩa là màu sắc rực rỡ hơn.

So sánh SDR mô phỏng với HDR (xem HDR thực yêu cầu màn hình HDR)
So sánh SDR mô phỏng với HDR (xem HDR thực yêu cầu màn hình HDR)

Vì Trình phát lại 10 bit của Cấu hình VP9 2 hiện đã được hỗ trợ trong Chrome dành cho Windows 10 Mùa thu Cập nhật cho nhà sáng tạo, Chrome cũng hỗ trợ tính năng phát video HDR trên Windows 10 đang ở chế độ HDR. Lưu ý kỹ thuật, Chrome 64 hiện hỗ trợ màu scRGB cấu hình này cho phép nội dung nghe nhìn phát lại ở HDR.

Bạn có thể thử tính năng này bằng cách xem video Thế giới ở chế độ HDR ở độ phân giải 4K (ULTRA HD) trên YouTube rồi kiểm tra để đảm bảo video đó phát HDR bằng cách xem chế độ cài đặt chất lượng của trình phát trên 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

Tất cả những gì bạn cần hiện tại là Bản cập nhật Windows 10 cho mùa thu dành cho nhà sáng tạo, một phiên bản tương thích với HDR thẻ đồ hoạ và màn hình (ví dụ: thẻ NVIDIA 10- Series, TV hoặc màn hình LG HDR), rồi bật chế độ HDR trong phần cài đặt màn hình Windows.

Nhà phát triển web có thể phát hiện gam màu gần đúng mà kết quả đầu ra hỗ trợ thiết bị có truy vấn nội dung đa phương tiệ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 với screen.colorDepth. Sau đây là một cách sử dụng những dấu hiệu để phát hiện xem HDR có hỗ trợ định dạng VP9 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"'))
}

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

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

Giấy phép có hiệu lực lâu dài cho Windows và Mac

Giấy phép có hiệu lực lâu dài trong Tiện ích phương tiện đã mã hoá (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ớ của bạn mà không cần gửi một yêu cầu giấy phép khác tới máy chủ. Đây là cách có hỗ trợ phát khi không có mạng trong EME.

Cho đến nay, ChromeOS và Android là những nền tảng duy nhất hỗ trợ tính năng liên tục giấy phép. Không đúng nữa. Phát nội dung được bảo vệ qua EME trong khi thiết bị đang ngoại tuyến hiện cũng có thể thực hiện được 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ự dùng thử giấy phép cố định bằng cách xem Ứng dụng web tiến bộ (PWA) nội dung đa phương tiện mẫu và làm theo các bước sau:

  1. Truy cập 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" và chờ hệ thống tải video 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!

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

Khớp với các trình duyệt khác triển khai, Chrome Desktop hiện đặt mặc định tải trước giá trị cho các phần tử <video> và <audio> vào "metadata" để 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 thuộc tính tải trước gợi ý sẽ bị loại bỏ khi MediaSource được đính kèm vào phần tử đa phương tiện dưới dạng thuộc tính trang web xử lý các tải trước riêng.

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 giao hàng | 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 các phần tử phương tiện playbackRate được đặt thành một giá trị không được Chrome hỗ trợ (ví dụ: giá trị âm), "NotSupportedError" DOMException đượ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, quá trình triển khai hiện tại của Chrome sẽ tăng 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 ví dụ thực tế.

Ý định giao hàng | 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 cố gắng tìm các cách mới để cải thiện thời lượng pin và Chrome 63 cũng không phải là ngoại lệ.

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

Lỗi Chromium

Loại bỏ tiếng khi phát lại tốc độ cực cao

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

Lỗi Chromium