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

François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

Chromestatus Tracker | ข้อบกพร่อง 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 ทุกเวอร์ชันที่รองรับ

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

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

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

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

<video autopictureinpicture></video>

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

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

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

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

ความตั้งใจในการทดสอบ | ตัวติดตาม Chromestatus | ข้อบกพร่อง 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