การอัปเดตเสียง/วิดีโอใน Chrome 58

François Beaufort
François Beaufort
GitHub

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

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

การควบคุมสื่อในตัวใน Chrome 58
รูปที่ 1 การควบคุมสื่อดั้งเดิมใน 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

ความตั้งใจที่จะเปิดตัว | เครื่องมือติดตาม 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>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

ความตั้งใจที่จะเปิดตัว | เครื่องมือติดตาม Chromestatus | ข้อบกพร่องของ Chromium

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

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

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

ความตั้งใจที่จะเปิดตัว | เครื่องมือติดตาม Chromestatus | ข้อบกพร่องของ Chromium

การค้นหาสื่อ color-gamut

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

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

การใช้งานปัจจุบันใน Chrome ยอมรับคีย์เวิร์ด srgb, p3 (ขอบเขตสีที่ระบุโดย Color Space DCI P3) และ rec2020 (ขอบเขตสีที่ระบุโดย Color Space 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