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!
![Phím phương tiện trên bàn phím](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=9&hl=vi)
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ứ khá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](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=9&hl=vi)
Để 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.