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

François Beaufort
François Beaufort
GitHub

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:

Hỗ trợ Khoá phương tiệ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 cơ bản để phát nội dung đa phương tiện, chẳng hạn như phát/tạm dừng, bản nhạc trước và bản tiếp theo. Tai nghe cũng có tính năng này. Cho đến nay, người dùng máy tính chưa thể sử dụng các phím 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!

Phím phương tiện trên bàn phím
Phím phương tiện trên bàn phím

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 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ẽ tiếp tục và nhận một sự kiện nội dung nghe nhìn "phát". Chính sách này hoạt động bất kể Chrome chạy trong nền trước hay nền.

Giờ đây, trong ChromeOS, các ứng dụng Android sử dụng tính năng lấy 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 những sự kiện truyền thông này để có hành động phù hợp.

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ứ khác nữa! Với API Phiên phương tiện hiện đã có trên máy tính (trước đây, API này chỉ được hỗ trợ trên thiết bị di động), 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ư việc thay đổi kênh được kích hoạt bằng các phím phương tiện. 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ẽ xử lý tự động các phím phát và tạm dừng. Tuy nhiên, nếu hành vi mặc định không hiệu quả, bạn vẫn có thể đặt một số trình xử lý hành động cho "play" và "pause" (tạm dừng) để ngăn điều này.

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

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

ChromeOS, macOS và Windows hỗ trợ Khoá nội dung đa phương tiện phần cứng. Linux sẽ có sau.

Hãy xem tài liệu dành cho nhà phát triển hiện có của chúng tôi và dùng thử các mẫu phiên sự kiện đa phương tiện chính thức.

Công cụ theo dõi Chromestatus | Lỗi Chromium

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

Nhờ có API Kiểm tra chính sách HDCP, giờ đây, 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ể, chẳng hạn như yêu cầu về HDCP hay không trước khi yêu cầu giấy phép Widevine và tải nội dung nghe nhìn.

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

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

API này có sẵn trên tất cả các nền tảng. Tuy nhiên, quy trình kiểm tra chính sách thực tế có thể không thực hiện được trên một số nền tảng. 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à Android WebView.

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

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

Bản dùng thử ban đầu của tính năng Hình trong hình tự động đối với các PWA đã cài đặt

Một số trang có thể muốn tự động chuyển sang và để lại chế độ Hình trong hình cho một phần tử video; ví dụ: các ứng dụng hội nghị truyền hình trên web sẽ hưởng lợi từ một số chế độ 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. Tiếc là không thể làm điều này với yêu cầu cử chỉ của người dùng. Đây là tính năng Hình trong hình tự động!

Để hỗ trợ các hoạt động chuyển đổi thẻ và ứng dụng này, 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ơ bản:

  • 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 phép.
  • Khi tài liệu hiển thị, phần tử video trong chế độ Hình trong hình sẽ tự động rời khỏi phần tử đó.

Chỉ vậy thôi! Lưu ý rằng tính năng Tự động 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.

Vui lòng xem spec để biết thêm thông tin chi tiết và thử dùng mẫu PWA chính thức.

Ý định để thử nghiệm | Công cụ theo dõi trạng thái của 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 video thường bao gồm các quảng cáo trước video. Các nhà cung cấp nội dung thường cho phép bỏ qua quảng cáo sau vài giây. Tiếc là cửa sổ Hình trong hình không tương tác, nên người dùng xem video ở chế độ Hình trong hình không thể thực hiện việc này hôm nay.

Với API Phiên đa phương tiện hiện đã có trên máy tính (trước đây chỉ được 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 ở 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, điều này 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 | Công cụ theo dõi trạng thái của Chrome | Lỗi Chromium

Đã cấp quyền tự động phát cho PWA máy tính

Giờ đây, Ứng dụng web tiến bộ đã có mặt trên tất cả các nền tảng dành cho máy tính, nên chúng tôi đang mở rộng quy tắc mà chúng tôi có trên thiết bị di động sang máy tính: hiện cho phép tự động phát có âm thanh đối với các PWA đã cài đặt. Xin lưu ý rằng chính sách 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