Trang này được dịch bởi Cloud Translation API.

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

François Beaufort

Trong bài viết này, tôi sẽ thảo luận về các tính năng đa phương tiện mới của Chrome 73, bao gồm:

Phím đa phương tiện phần cứng hiện được hỗ trợ để điều khiển chế độ phát nội dung nghe nhìn trên máy tính.
Nhà phát triển web có thể truy vấn xem có thể thực thi một chính sách HDCP nhất định hay không.
Chế độ hình trong hình tự động trong PWA dành cho máy tính và "Bỏ qua quảng cáo" trong chế độ Hình trong hình sẽ ra mắt trong các thử nghiệm theo nguyên gốc.
PWA dành cho máy tính được cấp quyền tự động phát có âm thanh.

Hỗ trợ Khoá nội dung nghe nhìn phần cứng

Ngày nay, nhiều bàn phím có các phím để điều khiển các chức năng phát nội dung đa phương tiện cơ bản, chẳng hạn như phát/tạm dừng, bản nhạc trước và bản nhạc tiếp theo. Tai nghe cũng có các nút này. Cho đến nay, người dùng máy tính không thể sử dụng các phím đa phương tiện này để điều khiển việc phát âm thanh và video trong Chrome. Điều này sẽ thay đổi hôm nay!

Nếu người dùng nhấn phím tạm dừng, thành phần nội dung nghe nhìn đang hoạt động đang phát trong Chrome sẽ bị tạm dừng và nhận một sự kiện nội dung nghe nhìn "tạm dừng". Nếu bạn nhấn phím phát, phần tử nội dung nghe nhìn đã tạm dừng trước đó sẽ được tiếp tục và nhận một sự kiện nội dung nghe nhìn "play". Tính năng này hoạt động bất kể Chrome đang ở nền trước hay nền sau.

Giờ đây, trong ChromeOS, các ứng dụng Android dùng tính năng quyền phát âm thanh sẽ yêu cầu Chrome tạm dừng và tiếp tục phát âm thanh để tạo ra trải nghiệm nghe nhìn liền mạch giữa các trang web trên Chrome, Ứng dụng Chrome và Ứng dụng Android. Tính năng này hiện chỉ được hỗ trợ trên thiết bị ChromeOS chạy Android P.

Tóm lại, bạn nên luôn theo dõi các sự kiện đa phương tiện này và hành động tương ứng.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Tuy nhiên, hãy đợi vì còn nhiều thứ khác nữa! Giờ đây, Media Session API đã có trên máy tính (trước đây chỉ hỗ trợ trên thiết bị di động), các nhà phát triển web có thể xử lý các sự kiện liên quan đến nội dung nghe nhìn, chẳng hạn như thay đổi bản nhạc do các phím nội dung nghe nhìn kích hoạt. Các sự kiện previoustrack và nexttrack hiện được hỗ trợ.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Chrome sẽ tự động xử lý các phím phát và tạm dừng. Tuy nhiên, nếu hành vi mặc định không phù hợp với bạn, thì bạn vẫn có thể thiết lập một số trình xử lý thao tác là "phát" và "tạm dừng" để ngăn chặn điều này.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Tính năng Hỗ trợ Khoá nội dung đa phương tiện phần cứng có trên ChromeOS, macOS và Windows. Linux sẽ ra mắt sau.

Hãy tham khảo tài liệu dành cho nhà phát triển hiện có của chúng tôi và thử các mẫu Media Session chính thức.

Chromestatus Tracker | Lỗi Chromium

Phương tiện đã mã hoá: Kiểm tra chính sách HDCP

Nhờ API Kiểm tra chính sách MCM, giờ đây, các nhà phát triển web có thể truy vấn xem có thể thực thi một chính sách cụ thể (ví dụ: yêu cầu về HDCP) trước khi yêu cầu giấy phép Widevine và tải nội dung nghe nhìn hay không.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

API này có trên tất cả các nền tảng. Tuy nhiên, một số nền tảng có thể không hỗ trợ tính năng kiểm tra chính sách thực tế. Ví dụ: lời hứa kiểm tra chính sách HDCP sẽ từ chối bằng NotSupportedError trên Android và WebView của Android.

Hãy xem tài liệu trước đây dành cho nhà phát triển và thử mẫu chính thức để xem tất cả các phiên bản HDCP được hỗ trợ.

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

Bản dùng thử theo nguyên gốc cho tính năng Hình trong hình tự động cho PWA đã cài đặt

Một số trang có thể muốn tự động chuyển sang và thoát khỏi chế độ Hình trong hình cho một phần tử video; ví dụ: các ứng dụng web hội nghị truyền hình sẽ được hưởng lợi từ một số hành vi Hình trong hình tự động khi người dùng chuyển đổi qua lại giữa ứng dụng web và các ứng dụng hoặc thẻ khác. Rất tiếc, bạn không thể làm được việc này do yêu cầu về cử chỉ của người dùng. Vì vậy, chúng tôi xin giới thiệu Chế độ hình trong hình tự động!

Để hỗ trợ việc chuyển đổi ứng dụng và thẻ này, một thuộc tính autopictureinpicture mới sẽ được thêm vào phần tử <video>.

<video autopictureinpicture></video>

Dưới đây là cách hoạt động của tính năng này:

Khi tài liệu bị ẩn, phần tử video có thuộc tính autopictureinpicture được đặt gần đây nhất sẽ tự động chuyển sang chế độ Hình trong hình, nếu được cho phép.
Khi tài liệu hiển thị, phần tử video trong Hình trong hình sẽ tự động rời khỏi tài liệu đó.

Chỉ vậy thôi! Xin lưu ý rằng tính năng Tự động ở chế độ Hình trong hình chỉ áp dụng cho Ứng dụng web tiến bộ mà người dùng đã cài đặt trên máy tính.

Hãy xem thông số kỹ thuật để biết thêm thông tin chi tiết và thử sử dụng mẫu PWA chính thức.

Ý định thử nghiệm | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Bản dùng thử theo nguyên gốc để bỏ qua quảng cáo trong cửa sổ Hình trong hình

Mô hình quảng cáo dạng video thường bao gồm quảng cáo trước video. Nhà cung cấp nội dung thường cho phép người dùng bỏ qua quảng cáo sau vài giây. Đáng tiếc là do cửa sổ Hình trong hình không có tính tương tác nên người dùng đang xem video ở chế độ Hình trong hình hiện không thể làm việc này.

Giờ đây, Media Session API đã có trên máy tính (trước đây chỉ hỗ trợ trên thiết bị di động), bạn có thể sử dụng thao tác phiên phát nội dung đa phương tiện skipad mới để cung cấp tuỳ chọn này trong chế độ Hình trong hình.

Nút Bỏ qua quảng cáo trong cửa sổ Hình trong hình — Nút "Bỏ qua quảng cáo" trong cửa sổ Hình trong hình

Để cung cấp tính năng này, hãy truyền một hàm có skipad khi gọi setActionHandler(). Để ẩn, hãy truyền null. Như bạn có thể đọc ở bên dưới, cách làm khá đơn giản.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Hãy dùng thử mẫu "Bỏ qua quảng cáo" chính thức và cho chúng tôi biết cách cải thiện tính năng này.

Ý định thử nghiệm | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Cấp quyền tự động phát cho PWA dành cho máy tính

Giờ đây, Ứng dụng web tiến bộ đã có trên tất cả các nền tảng máy tính, nên chúng tôi sẽ mở rộng quy tắc mà chúng tôi có trên thiết bị di động sang máy tính: tự động phát có âm thanh hiện được cho phép đối với các PWA đã cài đặt. Xin lưu ý rằng thuộc tính này chỉ áp dụng cho các trang trong phạm vi của tệp kê khai ứng dụng web.

Lỗi Chromium