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 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 thành phần điều khiển nội dung nghe nhìn gốc của Chrome như nút tải xuống, nút toàn màn hình và nút remoteplayback bằng cách sử dụng API ControlsList mới.

Các chế độ điều khiển nội dung nghe nhìn gốc trong Chrome 58
Các chế độ đ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 chế độ điều khiển nội dung nghe nhì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 giới hạn.

Hiện tại, cách triển khai hiện tại là một cơ chế danh sách chặn trên các chế độ kiểm soát gốc với khả năng đặt 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 | Công cụ 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ải tiến) được phép tự động phát âm thanh và video được phân phát từ các nguồn gốc có trong phạm vi của tệp kê khai ứng dụng web mà không có 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 vì /foo nằm trong phạm vi báo cáo.

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

Âm thanh không tự động phát được vì /bar KHÔNG thuộc phạm vi này.

Ý định gửi | Công cụ 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 một 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 tắt 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 | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium

truy vấn nội dung nghe nhì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 giờ đây có thể truy cập vào khoảng màu ước tính được Chrome hỗ trợ cũng như các thiết bị đầu ra bằng truy vấn nội dung nghe nhìn color-gamut.

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

Cách triển khai hiện tại trong Chrome chấp nhận các từ khoá srgb, p3 (gamut được chỉ định theo Không gian màu DCI P3) và rec2020 (gam màu do Không gian màu của Đề xuất CNTTU-R BT.2020 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 | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium