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ợ Phím đa 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 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 từ hôm nay!
Nếu người dùng nhấn phím tạm dừng, thành phần nội dung đa phương tiện đang phát trong Chrome sẽ bị tạm dừng và nhận được sự kiện nội dung đa phương tiện "tạm dừng". Nếu bạn nhấn phím phát, thì phần tử nội dung đa phương tiện đã tạm dừng trước đó sẽ tiếp tục và nhận được sự kiện nội dung đa phương tiện "phát". Tính năng này hoạt động bất kể Chrome đang ở nền trước hay nền sau.
Trên ChromeOS, các ứng dụng Android sử dụng tâm điểm âm thanh hiện sẽ yêu cầu Chrome tạm dừng và tiếp tục phát âm thanh để tạo trải nghiệm đa phương tiệ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ứ khá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, bạn vẫn có thể đặt một số trình xử lý thao tác 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ợ Phím đ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
Nội dung đa phương tiện đã mã hoá: Kiểm tra chính sách HDCP
Nhờ 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ể (ví dụ: yêu cầu 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à Android WebView.
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
Thử nghiệm theo nguyên gốc cho chế độ 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à 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 ở chế độ 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 cho tính năng 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.
Để 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 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 | 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ả 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.