Cập nhật nội dung nghe nhìn trong Chrome 58

François Beaufort
François Beaufort
GitHub

Tuỳ chỉnh các nút điều khiển nội dung nghe nhìn

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

Các chế độ điều khiển nội dung nghe nhìn gốc trong Chrome 58
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 một cách để hiện hoặc ẩn các nút điều khiển nội dung nghe nhìn gốc không có ý nghĩa 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 nhất định.

Hiện tại, việc triển khai là một cơ chế danh sách chặn trên các chế độ kiểm soát gốc, có khả năng đặt trực tiếp các chế độ kiểm soát này từ nội dung HTML bằng cách sử dụng thuộc tính controlsList mới. 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

Intent to Ship | Chromestatus Tracker | Chromium Bug

Đã thêm tính năng Tự động phát cho Ứ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. Kể từ bây giờ, các trang web được cài đặt bằng quy trình cải tiến Thêm vào màn hình chính được phép tự động phát âm thanh và video được phân phát từ các nguồn 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",
  ...
}
Nên
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Âm thanh sẽ tự động phát khi /foo nằm trong phạm vi.

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

Không tự động phát được âm thanh vì /bar KHÔNG nằm trong phạm vi.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Tạm dừng video tự động phát không có tiếng khi video 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 người dùng tương tác. 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 video đó xuất hiện cho người dùng.

Kể từ Chrome 58, để giảm mức tiêu thụ điện năng, chế độ 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 iOS.

Intent to Ship | Chromestatus Tracker | Chromium Bug

truy vấn nội dung nghe nhìn color-gamut

Khi màn hình có gam màu rộng ngày càng phổ biến, các trang web hiện có thể truy cập vào phạm vi màu gần đúng mà Chrome và các thiết bị đầu ra hỗ trợ bằng cách sử dụng truy vấn nội dung nghe nhìn color-gamut.

Nếu bạn chưa quen với các định nghĩa về không gian màu, hồ sơ màu, gam màu, gam màu rộng và độ sâu màu, thì bạn nên đọc bài đăng trên blog WebKit Cải thiện màu sắc trên web. Bài viết này trình bày chi tiết cách sử dụng truy vấn phương tiện color-gamut để phân phát hình ảnh có gam màu rộng khi người dùng đang sử dụng màn hình có gam màu rộng và quay lại hình ảnh sRGB nếu không.

Cách triển khai hiện tại trong Chrome chấp nhận các từ khoá srgb, p3 (gamut do Không gian màu DCI P3 chỉ định) và rec2020 (gamut do Không gian màu theo Đề 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")';
}

Intent to Ship | Chromestatus Tracker | Chromium Bug