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:

Các phím nội dung nghe nhì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.
Các nhà phát triển web có thể tìm hiểu 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 trên máy tính và tính năng "Bỏ qua quảng cáo" Tính năng Hình trong hình sắp ra mắt trong bản dùng thử theo nguyên gốc.
PWA trên máy tính được cấp tự động phát có âm thanh.

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

Nhiều bàn phím ngày nay có các phím để điều khiển các chức năng phát phương tiện cơ bản như 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ó chức năng này. Cho đến bây giờ, người dùng máy tính không thể sử dụng các phím nội dung nghe nhìn này để điều khiển chế độ 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 thông báo "bị tạm dừng" sự kiện truyền thông. Nếu bạn nhấn phím phát, phần tử nội dung đa phương tiện đã tạm dừng trước đó sẽ được tiếp tục và nhận được thông báo "phát" đa phương tiện sự kiện. Hoạt động bất kể Chrome đang chạy ở nền trước hay nền sau.

Giờ đây, trong ChromeOS, các ứng dụng Android dùng tính năng tập trung âm thanh sẽ yêu cầu Chrome tạm dừng và tiếp tục âm thanh để tạo 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 ChromeOS thiết bị chạy Android P.

Tóm lại, bạn nên luôn lắng nghe những sự kiện truyền thông này và hành động cho 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ứ khác nữa! Với API phiên nội dung nghe nhì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), các nhà phát triển web có thể xử lý nội dung nghe nhìn các sự kiện liên quan như thay đổi theo dõi được kích hoạt bởi các phím phương tiện. Chiến lược phát hành đĩa đơ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.
});

Các phím phát và tạm dừng do Chrome xử lý tự động. Tuy nhiên, nếu mặc định hoạt động không hiệu quả với bạn, bạn vẫn có thể thiết lập một số trình xử lý hành động cho "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ẽ có sau.

Xem tài liệu hiện có của chúng tôi dành cho nhà phát triển và thử dùng nội dung nghe nhìn chính thức Mẫu phiên.

Trình theo dõi Chromestatus | 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 DHU, các nhà phát triển web hiện có thể truy vấn xem một chính sách cụ thể, ví dụ: Yêu cầu về HDCP có thể được thực thi 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ó trên tất cả các nền tảng. Tuy nhiên, các quá trình kiểm tra chính sách thực tế có thể không được hỗ trợ trên một số nền tảng. Ví dụ: cam kết 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 của chúng tôi dành cho nhà phát triển và thử dùng tài liệu chính thức mẫu để xem tất cả các phiên bản HDCP được hỗ trợ.

Ý định giao hàng | 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 truy cập và để lại chế độ Hình trong hình 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ố 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. Rất tiếc là không thể thực hiện được điều này với yêu cầu về cử chỉ của người dùng. Đây là tính năng Tự động hình trong hình!

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

<video autopictureinpicture></video>

Dưới đây là phần mô tả khái quát về cách hoạt động:

Khi tài liệu bị ẩn, phần tử video có autopictureinpicture được đặt gần đây nhất là tự động nhập Hình trong hình, nếu được phép.
Khi tài liệu hiển thị, phần tử video ở chế độ Hình trong hình sẽ tự động thoát khỏi ứng dụng đó.

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

Xem quy cách để biết thêm chi tiết và dùng thử bằng PWA chính thức mẫu.

Ý đị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 video thường bao gồm quảng cáo trước video. Nội dung thường giúp bạn bỏ qua quảng cáo sau vài giây. Thật đáng buồn, vì cửa sổ Hình trong hình không mang tính tương tác, nên người dùng sẽ xem video trong Tính năng Hình trong hình không thể thực hiện việc này hôm nay.

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

Nút Bỏ qua quảng cáo trong cửa sổ Hình trong hình — "Bỏ qua quảng cáo" nút 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 thẻ/vé, hãy truyền null. Như bạn có thể đọc dưới đâ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 thử dùng tính năng chính thức để bỏ qua quảng cáo mẫu và cho chúng tôi biết cách tính năng này có thể có thể được cải thiện.

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

Đã cấp chế độ tự động phát cho PWA trên máy tính

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