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 – API thông tin giải mã

Ngày nay, các nhà phát triển web dựa vào isTypeSupported() hoặc canPlayType() để biết liệu một số nội dung nghe nhìn có thể giải mã được hay không. Tuy nhiên, câu hỏi thực sự nên là: "ứng dụng 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à Tính năng nội dung đa phương tiện đề xuất muốn giải quyết: API dùng để truy vấn trình duyệt về khả năng giải mã 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.. API này sẽ hiển thị các thông tin như 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ề lượt phát trước đó do trình duyệt ghi lại.

Tóm lại, đây là cách thức hoạt động của Decode Info API (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 (smooth và powerEfficient) 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 đó. Định nghĩa smooth là đúng khi tỷ lệ phần trăm số 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% số khung hình. Khung hình 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ã bên dưới để phát hiện phạm vi cung cấp và quay lại cách 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ó thể dùng 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 sử dụng API Thông tin giải mã (một phần của Khả năng truyền thông) trong trường này, trước đây chúng tôi đã thêm tính năng này vào Chrome 64 dưới dạng bản dùng thử theo nguyên gốc.

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

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

So sánh SDR và HDR được mô phỏng (cần có màn hình HDR để xem HDR thực sự)
So sánh giữa SDR và HDR được mô phỏng (để xem HDR thực sự, bạn phải có màn hình HDR)

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

Bạn có thể dùng thử bằng cách xem video Thế giới ở chế độ HDR ở độ phân giải 4K (ULTRA HD) trên YouTube và kiểm tra xem video có phát HDR hay không 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

Hiện tại, tất cả những gì bạn cần là Windows 10 Fall Creator Update, một màn hình và thẻ đồ hoạ tương thích với 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 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 gam màu gần đây và số bit 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 tính năng đó để phát hiện xem VP9 HDR có được hỗ trợ hay không:

// 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 mã hoá và giải mã VP9 với Cấu hình 2 được chuyể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 sắc HDR trong CSS, canvas, hình ảnh và nội dung được bảo vệ. Nhóm Chrome đang khắc phục sự cố này. Hãy tiếp tục theo dõi!

Giấy phép dài hạn cho Windows và Mac

Giấy phép lâu dài trong Tiện ích phương tiện đã mã hoá (EME) 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 tới máy chủ. Đây là cách hỗ trợ tính năng 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ợ giấy phép lâu dài. Điều này không còn đúng nữa. Giờ đây, bạn 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 lâu dài bằng cách xem Sample Media PWA rồi 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" và chờ video được 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!

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

Khớp với các cách triển khai của các trình duyệt khác, Chrome trên máy tính hiện sẽ đặ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 các trường hợp bạn không đặt giá trị tải trước. 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 đa phương tiện khi trang web xử lý hoạt động 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", còn giá trị tải trước <video preload="auto"> vẫn là "auto". Hãy dùng thử mẫu chính thức.

Ý định gửi | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium

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

Sau khi thay đổi thông số kỹ thuật HTML, khi playbackRate của thành phần đ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 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ẽ đưa ra ngoại lệ này khi playbackRate có giá trị âm, nhỏ hơn 0, 0625 hoặc lớn hơn 16. Hãy dùng thử mẫu chính thức để xem ví dụ thực tế.

Ý định gửi | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium

Tối ưu hoá bản nhạc video trong nền

Nhóm Chrome luôn cố gắng tìm những 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, 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 máy tính Chrome (Windows, Mac, Linux và ChromeOS). Đây là nội dung tiếp nối từ một thay đổi tương tự chỉ áp dụng cho các 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 tiếng khi playbackRate dưới 0,5 hoặc cao hơn 4 vì chất lượng giảm đáng kể. Vì Chrome đã chuyển sang phương pháp Thêm dạng sóng-tương tự-trùng lặp (WSOLA) để giảm chất lượng, nên âm thanh sẽ không cần tắt nữa. Điều này có nghĩa là bạn có thể phát âm thanh siêu chậm và cực nhanh ngay bây giờ.

Lỗi Chromium