ในบทความนี้ เราจะพูดถึงฟีเจอร์ใหม่ของ Chrome 73 ด้านสื่อ ซึ่งได้แก่
- ตอนนี้คีย์สื่อของฮาร์ดแวร์ได้รับการรองรับเพื่อควบคุมการเล่นสื่อบนเดสก์ท็อปแล้ว
- นักพัฒนาเว็บจะค้นหาว่าจะบังคับใช้นโยบาย HDCP บางรายการได้หรือไม่
- การแสดงภาพซ้อนภาพอัตโนมัติใน PWA บนเดสก์ท็อปและ "ข้ามโฆษณา" ในการแสดงภาพซ้อนภาพกำลังจะเข้าสู่ช่วงทดลองใช้จากต้นทาง
- PWA บนเดสก์ท็อปจะได้รับการเล่นอัตโนมัติพร้อมเสียง
การสนับสนุนคีย์สื่อของฮาร์ดแวร์
ปัจจุบันแป้นพิมพ์จำนวนมากมีแป้นสำหรับควบคุมฟังก์ชันการเล่นสื่อพื้นฐาน เช่น เล่น/หยุดชั่วคราว แทร็กก่อนหน้า และแทร็กถัดไป ชุดหูฟังก็มีเช่นกัน ก่อนหน้านี้ผู้ใช้เดสก์ท็อปยังใช้คีย์สื่อเหล่านี้เพื่อควบคุมการเล่นเสียงและวิดีโอใน Chrome ไม่ได้ การเปลี่ยนแปลงในวันนี้
![ปุ่มสื่อบนแป้นพิมพ์](https://developer.chrome.google.cn/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=5&hl=th)
หากผู้ใช้กดแป้นหยุดชั่วคราว องค์ประกอบสื่อที่ใช้งานอยู่ซึ่งเล่นใน 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
ใหม่เพื่อมอบตัวเลือกนี้ในการแสดงภาพซ้อนภาพ
![ปุ่มข้ามโฆษณาในหน้าต่างการแสดงภาพซ้อนภาพ](https://developer.chrome.google.cn/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=5&hl=th)
หากต้องการให้ฟีเจอร์นี้ส่งฟังก์ชันด้วย 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 ของเว็บแอปเท่านั้น