Update media di Chrome 58

François Beaufort
François Beaufort
GitHub

Penyesuaian kontrol media

Developer kini dapat menyesuaikan kontrol media native Chrome seperti tombol download, layar penuh, dan pemutaran jarak jauh menggunakan ControlsList API yang baru.

Kontrol media native di Chrome 58
Kontrol media native di Chrome 58

API ini menawarkan cara untuk menampilkan atau menyembunyikan kontrol media native yang tidak masuk akal atau bukan bagian dari pengalaman pengguna yang diharapkan, atau hanya memungkinkan beberapa fitur terbatas.

Implementasi saat ini adalah mekanisme daftar yang tidak diizinkan pada kontrol native dengan kemampuan untuk menetapkannya langsung dari konten HTML menggunakan atribut baru controlsList. Lihat contoh resmi.

Penggunaan dalam HTML:

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

Penggunaan di 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

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium

Putar Otomatis untuk Progressive Web App yang ditambahkan ke layar utama

Sebelumnya, Chrome digunakan untuk memblokir semua autoplay dengan suara di Android tanpa pengecualian. Hal ini tidak lagi benar. Mulai sekarang, situs yang diinstal menggunakan alur Tambahkan ke Layar Utama yang ditingkatkan diizinkan untuk memutar otomatis audio dan video yang ditayangkan dari origin yang disertakan dalam cakupan manifes aplikasi web tanpa batasan.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Anjuran
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Audio akan diputar otomatis karena /foo berada dalam cakupan.

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

Audio gagal diputar otomatis karena /bar TIDAK termasuk dalam cakupan.

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium

Jeda video yang dibisukan, diputar otomatis saat tidak terlihat

Seperti yang mungkin sudah Anda ketahui, Chrome di Android memungkinkan video muted mulai diputar tanpa interaksi pengguna. Jika video ditandai sebagai muted dan memiliki atribut autoplay, Chrome akan mulai memutar video saat video tersebut dapat dilihat oleh pengguna.

Mulai Chrome 58, untuk mengurangi penggunaan daya, pemutaran video dengan atribut autoplay akan dijeda saat berada di luar layar dan dilanjutkan saat kembali terlihat, mengikuti perilaku Safari iOS.'

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium

kueri media color-gamut

Karena layar gamut warna yang luas semakin populer, situs kini dapat mengakses perkiraan warna yang didukung oleh Chrome dan perangkat output menggunakan kueri media color-gamut.

Jika Anda belum memahami definisi ruang warna, profil warna, gamut, gamut lebar, dan kedalaman warna, sebaiknya baca postingan blog WebKit Meningkatkan Warna di Web. Bagian ini menjelaskan banyak detail tentang cara menggunakan kueri media color-gamut untuk menyajikan gambar gamut-lebar ketika pengguna berada di layar gamut-lebar dan jika sebaliknya, beralih kembali ke gambar sRGB.

Implementasi saat ini di Chrome menerima kata kunci srgb, p3 (gamut yang ditentukan oleh DCI P3 Color Space), dan rec2020 (gamut yang ditentukan oleh kata kunci ITU-R Recommendation BT.2020 Color Space). Lihat contoh resmi.

Penggunaan dalam 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>

Penggunaan dalam 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");
  }
}

Penggunaan di 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")';
}

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium