Update media di Chrome 58

François Beaufort
François Beaufort
GitHub

Penyesuaian kontrol media

Developer kini dapat menyesuaikan kontrol media bawaan Chrome seperti tombol download, layar penuh, dan remoteplayback menggunakan ControlsList API baru.

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

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

Implementasi saat ini untuk sementara adalah mekanisme daftar blokir pada kontrol bawaan dengan kemampuan untuk menyetelnya langsung dari konten HTML menggunakan atribut baru controlsList. Lihat contoh resminya.

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

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium

Putar otomatis untuk Progressive Web App ditambahkan ke layar utama

Sebelumnya, Chrome 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 audio dan video secara otomatis yang ditayangkan dari origin yang disertakan dalam cakupan manifest 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 saat /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 dalam cakupan.

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium

Menjeda video yang diputar otomatis dan dibisukan 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 terlihat oleh pengguna.

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

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium

kueri media color-gamut

Karena layar wide color gamut semakin populer, situs kini dapat mengakses perkiraan rentang 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 Anda membaca postingan blog WebKit Improving Color on the Web. Artikel ini menjelaskan secara mendetail cara menggunakan kueri media color-gamut untuk menayangkan gambar gamut lebar saat pengguna menggunakan layar gamut lebar dan kembali ke gambar sRGB jika tidak.

Implementasi saat ini di Chrome menerima kata kunci srgb, p3 (gamut yang ditentukan oleh Ruang Warna DCI P3), dan rec2020 (gamut yang ditentukan oleh Ruang Warna BT.2020 Rekomendasi ITU-R). Lihat contoh resminya.

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

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium