- Developer kini dapat menyesuaikan kontrol media seperti tombol download, layar penuh, dan pemutaran jarak jauh.
- Situs yang diinstal menggunakan alur "Tambahkan ke Layar Utama" dapat memutar otomatis audio dan video dalam cakupan manifes.
- Chrome di Android kini menjeda pemutaran otomatis video yang dibisukan saat tidak terlihat.
- Developer kini dapat mengakses perkiraan rentang warna yang didukung oleh Chrome dan
perangkat output menggunakan
color-gamutMedia Query. - Saat menggunakan Ekstensi Sumber Media, kini Anda dapat beralih antara streaming yang dienkripsi dan streaming yang jelas.
Penyesuaian kontrol media
Developer kini dapat menyesuaikan kontrol media native Chrome seperti tombol download, layar penuh, dan [remoteplayback] menggunakan [ControlsList API] baru.
API ini menawarkan cara untuk menampilkan atau menyembunyikan kontrol media native yang tidak sesuai atau bukan bagian dari pengalaman pengguna yang diharapkan, atau hanya mengizinkan serangkaian fitur terbatas.
Penerapan saat ini adalah mekanisme daftar yang tidak diizinkan pada kontrol native dengan kemampuan untuk menetapkannya langsung dari konten HTML menggunakan atribut controlsList yang baru. Lihat sampel resminya.
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
Rencana Pengiriman | Pelacak Chromestatus | 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 berlaku lagi. Mulai sekarang, situs yang diinstal menggunakan
alur Tambahkan ke Layar Utama yang ditingkatkan akan diizinkan untuk otomatis memutar 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",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Rencana Pengiriman | Pelacak Chromestatus | Bug Chromium
Jeda pemutaran otomatis video yang 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 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
di tampilan, mengikuti perilaku Safari iOS.'
Rencana Pengiriman | Pelacak Chromestatus | Bug Chromium
kueri media color-gamut
Karena layar gamut warna yang luas semakin populer, situs kini dapat mengakses
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 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 tampilan gamut lebar dan kembali ke gambar sRGB jika tidak.
Implementasi saat ini di Chrome menerima srgb, p3 (gamut yang ditentukan
oleh DCI P3 Color Space), dan rec2020 (gamut yang ditentukan oleh kata kunci
ITU-RRecommendation BT.2020 Color Space). Lihat sampel resminya.
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 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")';
}