Thông tin cập nhật về âm thanh/video trong Chrome 58

François Beaufort
François Beaufort
GitHub

Tuỳ chỉnh chế độ điều khiển nội dung nghe nhìn

Giờ đây, nhà phát triển có thể tuỳ chỉnh các chế độ điều khiển nội dung nghe nhìn gốc của Chrome, chẳng hạn như các nút tải xuống, toàn màn hình và [remoteplayback] bằng [API ControlsList] mới.

Các chế độ điều khiển nội dung nghe nhìn gốc trong Chrome 58
Hình 1. Các nút điều khiển nội dung nghe nhìn gốc trong Chrome 58

API này cung cấp cách hiện hoặc ẩn các chế độ điều khiển nội dung đa phương tiện gốc không phù hợp hoặc không thuộc trải nghiệm người dùng dự kiến, hoặc chỉ cho phép một số tính năng hạn chế.

Cách triển khai hiện tại là cơ chế danh sách chặn trên các chế độ điều khiển gốc, cho phép thiết lập chúng trực tiếp từ nội dung HTML bằng thuộc tính mới controlsList. Hãy xem mẫu chính thức.

Cách sử dụng trong HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

Cách sử dụng trong JavaScript:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

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

Đã thêm tính năng Tự động phát cho các Ứng dụng web tiến bộ vào màn hình chính

Trước đây, Chrome thường chặn tất cả autoplay có âm thanh trên Android mà không có ngoại lệ. Điều này không còn đúng nữa. Từ nay trở đi, các trang web được cài đặt bằng quy trình Thêm vào màn hình chính được cải tiến sẽ được phép tự động phát âm thanh và video phân phát qua các nguồn gốc có trong phạm vi của tệp kê khai ứng dụng web mà không bị hạn chế.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}

<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

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

Tạm dừng tự động phát video bị tắt tiếng khi không hiển thị

Như bạn có thể đã biết, Chrome trên Android cho phép video muted bắt đầu phát mà không cần sự tương tác của người dùng. Nếu video được đánh dấu là muted và có thuộc tính autoplay, thì Chrome sẽ bắt đầu phát video đó khi người dùng nhìn thấy video đó.

Từ Chrome 58, để giảm mức sử dụng pin, quá trình phát video có thuộc tính autoplay sẽ tạm dừng khi ở ngoài màn hình và tiếp tục khi quay lại chế độ xem, theo hành vi của Safari dành cho iOS."

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

truy vấn phương tiện color-gamut

Vì màn hình gam màu rộng ngày càng phổ biến, nên các trang web hiện có thể truy cập vào dải màu gần đúng được Chrome hỗ trợ cũng như các thiết bị đầu ra bằng truy vấn nội dung đa phương tiện color-gamut.

Nếu bạn chưa hiểu rõ các định nghĩa về hệ màu, cấu hình màu, gamut, rộng-gamut và độ sâu của màu, bạn nên đọc bài đăng trên blog Cải thiện màu trên web {/1} Phần này đi sâu vào cách sử dụng truy vấn phương tiện color-gamut để phân phát hình ảnh có kích thước rộng khi người dùng sử dụng màn hình cỡ lớn và dự phòng hình ảnh sRGB.

Cách triển khai hiện tại trong Chrome chấp nhận từ khoá srgb, p3 (gamut do Không gian màu DCI P3 chỉ định) và rec2020 (gamut do Không gian màu đề xuất BT.2020 của ITU-R chỉ định). Hãy xem mẫu chính thức.

Cách sử dụng trong HTML:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

Cách sử dụng trong CSS:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

Cách sử dụng trong JavaScript:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

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