การแสดงภาพซ้อนภาพ (PIP)

François Beaufort

ตั้งแต่เดือนเมษายน 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();
    }
});