HTML5 Video Picture in Picture All In One

https://caniuse.com/?search=picture%20in%20picture

Picture-in-Picture

Allows websites to create a floating video window that is always on top of other windows so that users may continue consuming media while they interact with other sites or applications on their devices.

const video = document.querySelector('video');
const button = document.querySelector('button');

if (!document.pictureInPictureEnabled) {
    button.disabled = true;
    button.textContent = 'PiP is not supported in your browser';
}

if (video.disablePictureInPicture) {
    button.disabled = true;
    button.textContent = 'PiP is currently disabled';
}

button.addEventListener('click', () => {
    if (document.pictureInPictureElement) {
        document
          .exitPictureInPicture()
          .catch(console.error);
    } else {
        video
          .requestPictureInPicture()
          .catch(console.error);
    }
});

video.addEventListener('enterpictureinpicture', () => {
    button.textContent = 'Exit Picture-in-Picture';
});

video.addEventListener('leavepictureinpicture', () => {
    button.textContent = 'Enter Picture-in-Picture';
});

demo

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！