- ตอนนี้นักพัฒนาซอฟต์แวร์สามารถปรับแต่งการควบคุมสื่อ เช่น ปุ่มดาวน์โหลด เต็มหน้าจอ และเล่นระยะไกลได้แล้ว
- เว็บไซต์ที่ติดตั้งโดยใช้ขั้นตอน "เพิ่มลงในหน้าจอหลัก" จะเล่นเสียงและวิดีโออัตโนมัติในขอบเขตของไฟล์ 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
Intent to Ship | Chromestatus Tracker | ข้อบกพร่อง 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>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Intent to Ship | Chromestatus Tracker | ข้อบกพร่อง Chromium
หยุดเล่นวิดีโอที่ปิดเสียงและเล่นอัตโนมัติชั่วคราวเมื่อซ่อน
คุณอาจทราบแล้วว่า Chrome ใน Android อนุญาตให้วิดีโอ muted เริ่มเล่นได้โดยไม่ต้องมีการโต้ตอบจากผู้ใช้ หากวิดีโอมีสถานะเป็น muted และมีแอตทริบิวต์ autoplay อยู่ Chrome จะเริ่มเล่นวิดีโอเมื่อผู้ใช้มองเห็น
จาก Chrome 58 การเล่นวิดีโอที่มีแอตทริบิวต์ autoplay จะหยุดชั่วคราวเมื่ออยู่นอกหน้าจอและกลับมาเล่นอีกครั้งเมื่อกลับมาอยู่ในมุมมอง ตามลักษณะการทำงานของ Safari iOS" เพื่อเป็นการลดการใช้พลังงาน"
Intent to Ship | Chromestatus Tracker | ข้อบกพร่อง 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")';
}