ตั้งแต่เดือนเมษายน 2017 เป็นต้นไป Chrome สำหรับ Android O รองรับการแสดงภาพซ้อนภาพ
ซึ่งจะอนุญาตให้ผู้ใช้เล่นองค์ประกอบ <video>
ในหน้าต่างซ้อนทับขนาดเล็กที่ไม่มีหน้าต่างอื่นๆ บล็อกไว้ เพื่อให้ผู้ใช้ยังดูในขณะที่ทำสิ่งอื่นๆ ได้
วิธีการทำงานคือ เปิด Chrome ไปที่เว็บไซต์ที่มีวิดีโอ และเล่นวิดีโอแบบเต็มหน้าจอ จากนั้นให้กดปุ่ม "หน้าแรก" เพื่อไปที่หน้าจอหลักของ Android แล้ววิดีโอที่กำลังเล่นจะเปลี่ยนเป็นการแสดงภาพซ้อนภาพโดยอัตโนมัติ ไม่มีแล้ว เจ๋งไปเลยใช่ไหมล่ะ
แล้วเดสก์ท็อปล่ะ จะทำอย่างไรหากเว็บไซต์ต้องการควบคุม ประสบการณ์ดังกล่าว
ข่าวดีคือเรากำลังร่างข้อกำหนดของ Picture-in-Picture Web API ฉบับร่างไว้ตามที่เราได้คุยกัน ข้อกำหนดนี้มีไว้เพื่ออนุญาตให้เว็บไซต์เริ่มต้นและควบคุมลักษณะการทำงานนี้ได้โดยแสดงชุดพร็อพเพอร์ตี้ต่อไปนี้กับ API
- แจ้งเว็บไซต์เมื่อมีวิดีโอเข้าและออกจากโหมดการแสดงภาพซ้อนภาพ
- อนุญาตให้เว็บไซต์ทริกเกอร์การแสดงภาพซ้อนภาพในองค์ประกอบวิดีโอผ่านท่าทางสัมผัสของผู้ใช้
- อนุญาตให้เว็บไซต์ออกจากการแสดงภาพซ้อนภาพ
- อนุญาตให้เว็บไซต์ตรวจสอบว่าสามารถเรียกใช้การแสดงภาพซ้อนภาพได้หรือไม่
และจะมีลักษณะดังนี้
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
ความคิดเห็น
คุณคิดอย่างไร โปรดส่งความคิดเห็นและระบุปัญหาในที่เก็บ WICG การแสดงภาพซ้อนภาพ เราอยากฟังความคิดเห็นของคุณ
การป้องกันการทำงาน PIP เริ่มต้นของ Android
ปัจจุบันคุณสามารถป้องกันไม่ให้วิดีโอใช้ลักษณะการทำงานแบบ PIP เริ่มต้นของ Android ใน Chrome ได้โดยตอบสนองต่อเหตุการณ์การปรับขนาด และตรวจจับเมื่อขนาดหน้าต่างเปลี่ยนไปอย่างมาก (ดูโค้ดด้านล่าง) เราไม่แนะนำให้ใช้วิธีนี้เป็นวิธีแก้ปัญหาถาวร แต่ให้ตัวเลือกชั่วคราวจนกว่าจะมีการใช้งาน Web API
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});