- ตอนนี้นักพัฒนาแอปสามารถปรับแต่งการควบคุมสื่อ เช่น ปุ่มดาวน์โหลด เต็มหน้าจอ และปุ่มการเล่นระยะไกลได้แล้ว
- เว็บไซต์ที่ติดตั้งโดยใช้ขั้นตอน "เพิ่มลงในหน้าจอหลัก" จะเล่นเสียงและวิดีโออัตโนมัติในขอบเขตของไฟล์ Manifest ได้
- ตอนนี้ Chrome บน Android จะหยุดเล่นวิดีโอที่ปิดเสียงโดยอัตโนมัติชั่วคราวเมื่อมองไม่เห็น
- ตอนนี้นักพัฒนาซอฟต์แวร์สามารถเข้าถึงช่วงสีโดยประมาณที่ Chrome และอุปกรณ์เอาต์พุตรองรับโดยใช้คำค้นหาสื่อของ
color-gamut
ได้แล้ว - เมื่อใช้ส่วนขยายแหล่งที่มาของสื่อ คุณจะสลับระหว่างสตรีมที่เข้ารหัสและล้างสตรีมได้
การปรับแต่งการควบคุมสื่อ
ตอนนี้นักพัฒนาแอปสามารถปรับแต่งการควบคุมสื่อดั้งเดิมของ Chrome เช่น ปุ่มดาวน์โหลด เต็มหน้าจอ และ remoteplayback โดยใช้ ControlsList API ใหม่ได้
API นี้มอบวิธีแสดงหรือซ่อนการควบคุมสื่อดั้งเดิมที่ไม่มีความหมายหรือไม่ใช่ส่วนหนึ่งของประสบการณ์ของผู้ใช้ที่คาดไว้ หรืออนุญาตเฉพาะฟีเจอร์บางส่วนเท่านั้น
การใช้งานในปัจจุบันเป็นกลไกรายการที่บล็อกในการควบคุมแบบเนทีฟที่สามารถตั้งค่าได้โดยตรงจากเนื้อหา HTML โดยใช้แอตทริบิวต์ใหม่ controlsList
ดูตัวอย่างอย่างเป็นทางการ
การใช้งานใน HTML:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
การใช้งานใน 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
ความตั้งใจที่จะจัดส่ง | ตัวติดตาม Chromestatus | ข้อบกพร่อง Chromium
เพิ่มการเล่นอัตโนมัติสำหรับ Progressive Web App ลงในหน้าจอหลักแล้ว
ก่อนหน้านี้ Chrome เคยบล็อก autoplay
ทั้งหมดที่มีเสียงใน Android โดยไม่มีข้อยกเว้น ซึ่งไม่เป็นความจริงอีกต่อไป จากนี้ไป เว็บไซต์ที่ติดตั้งโดยใช้ขั้นตอนเพิ่มลงในหน้าจอหลักที่ปรับปรุงใหม่จะได้รับอนุญาตให้เล่นเสียงและวิดีโออัตโนมัติที่แสดงจากต้นทางที่รวมอยู่ในขอบเขตของไฟล์ Manifest ของเว็บแอปได้โดยไม่มีข้อจำกัด
{
"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>
เสียงจะเล่นอัตโนมัติเมื่อ /foo
อยู่ในขอบเขต
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
เสียงไม่เล่นอัตโนมัติเนื่องจาก /bar
ไม่อยู่ในขอบเขต
ความตั้งใจที่จะจัดส่ง | ตัวติดตาม Chromestatus | ข้อบกพร่อง Chromium
หยุดเล่นวิดีโอที่ปิดเสียงไว้ชั่วคราวเมื่อมองไม่เห็น
คุณอาจทราบแล้วว่า Chrome ใน Android อนุญาตให้วิดีโอ muted
เริ่มเล่นได้โดยไม่ต้องมีการโต้ตอบจากผู้ใช้ หากวิดีโอมีการทำเครื่องหมายเป็น muted
และมีแอตทริบิวต์ autoplay
อยู่ Chrome จะเริ่มเล่นวิดีโอเมื่อผู้ใช้มองเห็น
จาก Chrome 58 เพื่อลดการใช้พลังงาน การเล่นวิดีโอที่มีแอตทริบิวต์ autoplay
จะหยุดชั่วคราวเมื่อปิดหน้าจอและจะกลับมาเล่นอีกครั้งเมื่อกลับมาดู ตามลักษณะการทำงานของ Safari iOS
ความตั้งใจที่จะจัดส่ง | ตัวติดตาม Chromestatus | ข้อบกพร่อง Chromium
คำค้นหาสื่อตามขอบเขตสี
เนื่องจากหน้าจอขอบเขตสีที่กว้างได้รับความนิยมมากขึ้นเรื่อยๆ เว็บไซต์จึงเข้าถึงช่วงสีโดยประมาณที่ Chrome รองรับและอุปกรณ์เอาต์พุตโดยใช้คำค้นหาสื่อ color-gamut
ได้
หากคุณยังไม่คุ้นเคยกับคำจำกัดความของพื้นที่สี โปรไฟล์สี ขอบเขต ขอบเขตกว้าง และความลึกของสี เราขอแนะนำให้อ่านบล็อกโพสต์การปรับปรุงสีบน WebKit ลงรายละเอียดเกี่ยวกับวิธีการใช้การค้นหาสื่อ color-gamut
เพื่อแสดงรูปภาพขอบเขตกว้างเมื่อผู้ใช้อยู่ในหน้าจอที่มีขอบเขตกว้างและกลับไปใช้รูปภาพ sRGB
การใช้งานปัจจุบันใน Chrome ยอมรับ srgb
, p3
(ขอบเขตที่ระบุโดย DCI P3 Color Space) และ rec2020
(ขอบเขตที่ระบุโดยคีย์เวิร์ดของ ITU-R Recommendation BT.2020 Color Space) ดูตัวอย่างอย่างเป็นทางการ
การใช้งานใน 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>
การใช้งานใน 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");
}
}
การใช้งานใน 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")';
}
ความตั้งใจที่จะจัดส่ง | ตัวติดตาม Chromestatus | ข้อบกพร่อง Chromium