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

François Beaufort
François Beaufort

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

ตอนนี้นักพัฒนาแอปสามารถปรับแต่งการควบคุมสื่อดั้งเดิมของ Chrome เช่น ปุ่มดาวน์โหลด เต็มหน้าจอ และ remoteplayback โดยใช้ 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

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