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

François Beaufort
François Beaufort
GitHub

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

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

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

API นี้แสดงวิธีแสดงหรือซ่อนตัวควบคุมสื่อแบบเนทีฟที่ไม่เหมาะสมหรือไม่เป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้ที่คาดหวัง หรืออนุญาตเฉพาะชุดฟีเจอร์ที่จำกัด

การใช้งานในปัจจุบันคือกลไกรายการที่บล็อกในการควบคุมแบบเนทีฟ ซึ่งสามารถตั้งค่าจากเนื้อหา HTML ได้โดยตรงโดยใช้แอตทริบิวต์ controlsList ใหม่ ดูตัวอย่างอย่างเป็นทางการ

การใช้งานใน HTML

<video controls controlsList="nofullscreen nodownload noremoteplay><back&q>uot;/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://e>xam<ple.com/foo"
  audio autoplay src="><https:>/</cdn.>com/file.mp4"/audio
/html

เสียงจะเล่นอัตโนมัติเมื่อ /foo อยู่ในขอบเขต

ไม่ควรทำ
<html>
  <link rel="canonical" href="https://e>xam<ple.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

คิวรีสื่อ color-gamut

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

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

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

การใช้งานใน HTML

<picture>
  <source media="(color-gamut: p3)" srcset=&quo>t;p<hoto-p3.jpg"
  source media="(color-gamut: rec2020)&qu>ot;< srcset="photo-rec2>0<20.jpg&q>uot;
  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")';
}

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