ในบทความนี้ เราจะพูดถึงฟีเจอร์สื่อใหม่ๆ ของ Chrome 73 ดังต่อไปนี้
- รองรับคีย์สื่อฮาร์ดแวร์เพื่อควบคุมการเล่นสื่อแล้ว บนเดสก์ท็อป
- นักพัฒนาเว็บจะค้นหาว่าจะบังคับใช้นโยบาย HDCP บางอย่างได้หรือไม่
- การแสดงภาพซ้อนภาพอัตโนมัติใน PWA บนเดสก์ท็อปและ "ข้ามโฆษณา" การแสดงภาพซ้อนภาพจะพร้อมใช้งานในช่วงทดลองใช้จากต้นทาง
- PWA บนเดสก์ท็อปจะได้รับการเล่นอัตโนมัติพร้อมเสียง
การรองรับคีย์สื่อของฮาร์ดแวร์
แป้นพิมพ์จำนวนมากในปัจจุบันมีแป้นต่างๆ สำหรับควบคุมฟังก์ชันการเล่นสื่อพื้นฐาน เช่น เป็นเล่น/หยุดชั่วคราว ก่อนหน้า และแทร็กถัดไป ชุดหูฟังก็มีให้พวกเขาเหมือนกัน จนถึงตอนนี้ ผู้ใช้เดสก์ท็อปไม่สามารถใช้คีย์สื่อเหล่านี้เพื่อควบคุมการเล่นเสียงและวิดีโอ ใน 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 จะมาภายหลัง
ดูเอกสารสำหรับนักพัฒนาซอฟต์แวร์ที่มีอยู่และลองใช้สื่ออย่างเป็นทางการ ตัวอย่างเซสชัน
ตัวติดตามสถานะ 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 ทั้งหมดที่รองรับ
ความตั้งใจในการจัดส่ง | ตัวติดตามสถานะ 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.
}
ลองใช้ "ข้ามโฆษณา" อย่างเป็นทางการ ตัวอย่างและแจ้งให้เราทราบว่าฟีเจอร์นี้ ปรับปรุงให้ดีขึ้น
ความตั้งใจในการทดสอบ | ตัวติดตามสถานะ Chrome | ข้อบกพร่องของ Chromium
ให้สิทธิ์เล่นอัตโนมัติสำหรับ PWA บนเดสก์ท็อป
และตอนนี้ Progressive Web App พร้อมใช้งานบนแพลตฟอร์มเดสก์ท็อปทั้งหมดแล้ว เราได้ขยายกฎที่เคยมีบนอุปกรณ์เคลื่อนที่ไปยังเดสก์ท็อป ซึ่งก็คือการเล่นอัตโนมัติด้วย อนุญาตเสียงสำหรับ PWA ที่ติดตั้งไว้แล้ว โปรดทราบว่าการตั้งค่านี้ใช้ได้กับหน้าเว็บใน ขอบเขตของไฟล์ Manifest ของเว็บแอป