การอัปเดตสื่อใน Chrome 58

François Beaufort
François Beaufort
GitHub

การปรับแต่งตัวควบคุมสื่อ

ตอนนี้นักพัฒนาแอปสามารถปรับแต่งตัวควบคุมสื่อของ Chrome เองได้แล้ว เช่น ปุ่มดาวน์โหลด เต็มหน้าจอ และเล่นจากระยะไกล โดยใช้ ControlsList API ใหม่

การควบคุมสื่อใน Chrome 58
การควบคุมสื่อเนทีฟใน Chrome 58

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 | เครื่องมือติดตามสถานะ Chrome | ข้อบกพร่องของ 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 ไม่ได้อยู่ในขอบเขต

Intent to Ship | เครื่องมือติดตามสถานะ Chrome | ข้อบกพร่องของ Chromium

หยุดเล่นวิดีโอที่ปิดเสียงโดยอัตโนมัติชั่วคราวเมื่อมองไม่เห็น

ดังที่คุณอาจทราบแล้ว Chrome ใน Android อนุญาตให้วิดีโอmutedเริ่มเล่นได้โดยไม่ต้องมีการโต้ตอบจากผู้ใช้ หากวิดีโอมีสถานะเป็น muted และมีแอตทริบิวต์ autoplay Chrome จะเริ่มเล่นวิดีโอเมื่อผู้ใช้มองเห็นวิดีโอ

ตั้งแต่ Chrome 58 เป็นต้นไป การเล่นวิดีโอที่มีแอตทริบิวต์ autoplay จะหยุดชั่วคราวเมื่อไม่ได้อยู่ในหน้าจอและเล่นต่อเมื่อกลับมาอยู่ในมุมมองตามลักษณะการทำงานของ Safari ใน iOS เพื่อลดการใช้พลังงาน"

Intent to Ship | เครื่องมือติดตามสถานะ Chrome | ข้อบกพร่องของ Chromium

คิวรี่สื่อตามสี

เนื่องจากหน้าจอแบบช่วงสีกว้างได้รับความนิยมมากขึ้นเรื่อยๆ เว็บไซต์จึงเข้าถึงช่วงสีโดยประมาณที่ Chrome และอุปกรณ์เอาต์พุตรองรับได้โดยใช้color-gamut Media Query

หากคุณยังไม่คุ้นเคยกับคำจำกัดความของพื้นที่สี โปรไฟล์สี ขอบเขตสี ขอบเขตสีกว้าง และความลึกของสี เราขอแนะนำให้อ่านบล็อกโพสต์ การปรับปรุงสีบนเว็บ ของ WebKit ซึ่งจะให้รายละเอียดมากเกี่ยวกับวิธีใช้การค้นหาสื่อของ color-gamut เพื่อแสดงรูปภาพที่มีขอบเขตกว้างเมื่อผู้ใช้ใช้จอแสดงผลที่มีขอบเขตกว้างและถอยกลับไปใช้รูปภาพ sRGB

การใช้งานปัจจุบันใน Chrome ยอมรับคีย์เวิร์ด srgb, p3 (ช่วงสีที่ระบุโดยพื้นที่สี DCI P3) และ rec2020 (ช่วงสีที่ระบุโดยพื้นที่สี ITU-R Recommendation BT.2020) ดูตัวอย่างอย่างเป็นทางการ

การใช้งานใน 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