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 nút đ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 ControlsList API 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 thị hoặc ẩn các nút đ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 nhóm tính năng hạn chế.

Hiện tại, cách triển khai là cơ chế danh sách chặn trên các thành phần điều khiển gốc với khả năng đặt trực tiếp các thành phần đó từ nội dung HTML bằng cách sử dụ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 phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium

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 từ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ó thể 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 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 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>

Âm thanh không tự động phát vì /bar KHÔNG nằm trong phạm vi.

Ý định phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Tạm dừng video tự động phát đã 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 người dùng tương tác. 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, tính năng phát video có thuộc tính autoplay sẽ bị 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 trên iOS."

Ý định gửi hàng | Trình theo dõi Chromestatus | Lỗi Chromium

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à thiết bị đầu ra hỗ trợ bằng cách sử dụng truy vấn nội dung đa phương tiện color-gamut.

Nếu chưa nắm rõ đị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, 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 nội dung đa phương tiện color-gamut để phân phát hình ảnh gam màu rộng khi người dùng sử dụng màn hình 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 (gam màu do Không gian màu DCI P3 chỉ định) và rec2020 (gam màu do Không gian màu theo đề xuất ITU-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 phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium