การอัปเดตสื่อใน 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

ช่วงทดลองใช้ Origin สำหรับฟีเจอร์การแสดงภาพซ้อนภาพอัตโนมัติสำหรับ 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.
}

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

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

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

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

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