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

François Beaufort
François Beaufort
GitHub

ในบทความนี้ เราจะพูดถึงฟีเจอร์สื่อใหม่ๆ ของ Chrome 73 ดังต่อไปนี้

การรองรับคีย์สื่อของฮาร์ดแวร์

แป้นพิมพ์จำนวนมากในปัจจุบันมีแป้นต่างๆ สำหรับควบคุมฟังก์ชันการเล่นสื่อขั้นพื้นฐาน เช่น เล่น/หยุดชั่วคราว แทร็กก่อนหน้า และแทร็กถัดไป ชุดหูฟังก็มีเช่นกัน ก่อนหน้านี้ ผู้ใช้เดสก์ท็อปจะใช้ปุ่มสื่อเหล่านี้เพื่อควบคุมการเล่นเสียงและวิดีโอใน Chrome ไม่ได้ ซึ่งเราจะเปลี่ยนแปลงเรื่องนี้ในวันนี้

ปุ่มสื่อบนแป้นพิมพ์
แป้นสื่อของแป้นพิมพ์

หากผู้ใช้กดแป้นหยุดชั่วคราว องค์ประกอบสื่อที่ใช้งานอยู่ซึ่งเล่นใน Chrome จะหยุดชั่วคราวและได้รับเหตุการณ์สื่อ "หยุดชั่วคราว" หากกดแป้นเล่น องค์ประกอบสื่อที่หยุดชั่วคราวก่อนหน้านี้จะเล่นต่อและได้รับเหตุการณ์สื่อ "เล่น" โดยใช้งานได้ไม่ว่า Chrome จะทำงานอยู่เบื้องหน้าหรือเบื้องหลัง

ใน ChromeOS แอป Android ที่ใช้โฟกัสเสียงจะบอกให้ Chrome หยุดเสียงชั่วคราวและกลับมาเล่นต่อเพื่อสร้างประสบการณ์สื่อระหว่างเว็บไซต์บน Chrome, แอป Chrome และแอป Android ซึ่งขณะนี้ใช้ได้เฉพาะในอุปกรณ์ ChromeOS ที่ใช้ Android P

กล่าวโดยย่อคือ แนวทางปฏิบัติที่ดีคือคอยฟังเหตุการณ์สื่อเหล่านี้อยู่เสมอและดำเนินการตามความเหมาะสม

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

แต่ยังไม่หมดเท่านี้! ด้วย Media Session API ที่พร้อมให้บริการบนเดสก์ท็อป (เมื่อก่อนนี้รองรับเฉพาะอุปกรณ์เคลื่อนที่เท่านั้น) นักพัฒนาเว็บจะจัดการกับเหตุการณ์ที่เกี่ยวข้องกับสื่อได้ เช่น การเปลี่ยนแปลงแทร็กที่ทริกเกอร์โดยคีย์สื่อ ปัจจุบันระบบรองรับเหตุการณ์ previoustrack และ nexttrack แล้ว

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

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

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

การรองรับแป้นสื่อของฮาร์ดแวร์พร้อมใช้งานใน ChromeOS, macOS และ Windows Linux จะพร้อมให้บริการในภายหลัง

โปรดดูเอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ที่มีอยู่และลองใช้ตัวอย่าง Media Session อย่างเป็นทางการ

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

สื่อที่เข้ารหัส: การตรวจสอบนโยบาย HDCP

HDCP Policy Check API ช่วยให้นักพัฒนาเว็บสามารถสอบถามได้ว่าสามารถบังคับใช้นโยบายที่เฉพาะเจาะจง เช่น ข้อกำหนด HDCP ได้หรือไม่ก่อนขอใบอนุญาต Widevine และโหลดสื่อ

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

API พร้อมใช้งานในทุกแพลตฟอร์ม อย่างไรก็ตาม การตรวจสอบนโยบายจริงอาจไม่พร้อมให้บริการในบางแพลตฟอร์ม ตัวอย่างเช่น สัญญาว่าการตรวจสอบนโยบาย HDCP จะปฏิเสธกับ NotSupportedError ใน Android และ Android WebView

โปรดดูเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ฉบับก่อนหน้าและลองใช้ตัวอย่างอย่างเป็นทางการเพื่อดู HDCP ทุกเวอร์ชันที่รองรับ

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

ช่วงทดลองใช้จากต้นทางสำหรับการแสดงภาพซ้อนภาพอัตโนมัติสำหรับ PWA ที่ติดตั้ง

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

ระบบจะเพิ่มแอตทริบิวต์ autopictureinpicture ใหม่ลงในองค์ประกอบ <video> เพื่อรองรับการสลับแท็บและแอป

<video autopictureinpicture></video>

วิธีการคร่าวๆ มีดังนี้

  • เมื่อเอกสารซ่อนอยู่ องค์ประกอบวิดีโอที่มีautopictureinpictureการกำหนดแอตทริบิวต์ล่าสุดจะเข้าสู่โหมดภาพซ้อนภาพโดยอัตโนมัติ หากได้รับอนุญาต
  • เมื่อมองเห็นเอกสาร องค์ประกอบวิดีโอในโหมดภาพในภาพจะออกจากโหมดนั้นโดยอัตโนมัติ

เพียงเท่านี้ก็เรียบร้อยแล้ว โปรดทราบว่าฟีเจอร์ภาพในภาพอัตโนมัติใช้ได้กับProgressive Web App เท่านั้นที่ผู้ใช้ติดตั้งไว้ในเดสก์ท็อป

ดูรายละเอียดเพิ่มเติมในข้อกําหนดและลองใช้ตัวอย่าง PWA อย่างเป็นทางการ

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

ช่วงทดลองใช้จากต้นทางสําหรับการข้ามโฆษณาในหน้าต่างการแสดงภาพซ้อนภาพ

รูปแบบโฆษณาวิดีโอมักจะประกอบด้วยโฆษณาตอนต้น ผู้ให้บริการเนื้อหามักจะอนุญาตให้ข้ามโฆษณาได้หลังจากผ่านไป 2-3 วินาที แต่น่าเสียดาย เนื่องจากหน้าต่างการแสดงภาพซ้อนภาพไม่ใช่การโต้ตอบ ผู้ใช้ที่ดูวิดีโอในการแสดงภาพซ้อนภาพยังดำเนินการดังกล่าวในปัจจุบันไม่ได้

ตอนนี้ Media Session API พร้อมใช้งานบนเดสก์ท็อปแล้ว (ก่อนหน้านี้รองรับเฉพาะบนอุปกรณ์เคลื่อนที่) จึงอาจใช้การดำเนินการของเซสชันสื่อ skipad ใหม่เพื่อเสนอตัวเลือกนี้ในโหมดภาพในภาพ

ปุ่มข้ามโฆษณาในหน้าต่างการแสดงภาพซ้อนภาพ
ปุ่ม "ข้ามโฆษณา" ในหน้าต่างภาพในภาพ

หากต้องการใช้ฟีเจอร์นี้ ให้ส่งฟังก์ชันที่มี skipad เมื่อเรียกใช้ setActionHandler() หากต้องการซ่อนบัตร null ดังที่คุณอ่านได้ด้านล่าง การดำเนินการนี้ค่อนข้างตรงไปตรงมา

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

ลองใช้ตัวอย่าง "ข้ามโฆษณา" อย่างเป็นทางการและแจ้งให้เราทราบว่าควรปรับปรุงฟีเจอร์นี้อย่างไร

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

เล่นอัตโนมัติที่ได้รับอนุญาตสำหรับ PWA บนเดสก์ท็อป

เนื่องจากตอนนี้ Progressive Web App พร้อมให้บริการบนแพลตฟอร์มเดสก์ท็อปทั้งหมดแล้ว เราจึงขยายกฎที่มีในอุปกรณ์เคลื่อนที่ไปยังเดสก์ท็อปด้วย โดยตอนนี้เราอนุญาตให้ PWA ที่ติดตั้งไว้เล่นอัตโนมัติพร้อมเสียง โปรดทราบว่าการตั้งค่านี้มีผลกับหน้าเว็บในขอบเขตของไฟล์ Manifest ของเว็บแอปเท่านั้น

ข้อบกพร่องของ Chromium