视频画中画Web API粗略

这篇文章由 DeathGhost 编辑,发布于

归类于 Javascript » 👋分享到微博 当前评论 0 条。

视频画中画,用户在浏览web页面信息时,可将视频弹出到一个悬浮可随意拖放的一个顶层小窗口,可继续阅读页面其他信息或进行其他操作。

Web视频页面中,我们常常会在用户可操作区域看到“画中画”功能操作,点击进入画中画模式后,视频会被置顶默认于屏幕右下角位置,便于我们进行其他阅读或操作(例如:优酷视频中等等相关视频站点)。

视频画中画Web API粗略
视频画中画Web API粗略

我们可以通过画中画Web API 中提供的一些方法去修改画中画模式的默认方法。例如,我们可以在页面中添加按钮,触发进入画中画模式与退出画中画默认一般。

<video src="20190116_084805.mp4" controls id="video"></video>
<button id="enter">进入画中画</button>
<button id="exit">退出画中画</button>

默认情况下,我们在视频元素中右键菜单项中含有“画中画”选项,点击即可进入画中画模式,关闭或返回标签页将退出画中画模式。

这是默认操作。

那么如果我们需要通过JavaScript进行操作,又该如何呢?

进入与退出画中画模式

video.requestPictureInPicture()
document.exitPictureInPicture()

字面意思我们可以看出为进入画中画与退出画中画模式操作。

所以,实际运用中,我们就可以定义事件对其操作。如同:

// 进入画中画
enter.addEventListener('click', () => {
    video.requestPictureInPicture().catch(error => {
        console.log(error);
    });
});
// 退出画中画
exit.addEventListener('click', () => {
    document.exitPictureInPicture().catch(error => {
        console.log(error);
    });
});

添加catch捕获潜在错误,如:已退出画中画模式,若再次点击,控制台则出错。

画中画活动状态

我们可以通过enterpictureinpictureleavepictureinpicture事件检测视频何时进入或退出画中画模式。

下面我们给其添加一个文本提示

// 事件检测 进入/退出
video.addEventListener('enterpictureinpicture', () => {
    tips.textContent = '已进入画中画模式';
});
video.addEventListener('leavepictureinpicture', () => {
    tips.textContent = '已退出画中画模式';
});

同时,我们可以返回其画中画的尺寸

video.addEventListener('enterpictureinpicture', (event) => {
    console.log(`画中画窗口大小:${event.pictureInPictureWindow.width} * ${event.pictureInPictureWindow.height}`);
});

禁用视频中的画中画

如果不希望视频弹出于画中画,禁止右键菜单中的画中画,那么,我们可以在视频元素中添加disablePictureInPicture属性即可。

<video disablePictureInPicture src="20190116_084805.mp4" controls id="video"></video>

完整demo内容,具体可以添加一个本地小视频测试。

<video disablePictureInPicture src="20190116_084805.mp4" controls id="video"></video>
<button id="enter">进入画中画</button>
<button id="exit">退出画中画</button>
<span id="tips"></span>
<script>
    const video = document.getElementById('video');
    const enter = document.getElementById('enter');
    const exit = document.getElementById('exit');
    const tips = document.getElementById('tips');
    // 进入画中画
    enter.addEventListener('click', () => {
        video.requestPictureInPicture().catch(error => {
            console.log(error);
        });
    });
    // 退出画中画
    exit.addEventListener('click', () => {
        document.exitPictureInPicture().catch(error => {
            console.log(error);
        });
    });
    // 事件检测 进入/退出
    video.addEventListener('enterpictureinpicture', (event) => {
        console.log(`画中画窗口大小:${event.pictureInPictureWindow.width} * ${event.pictureInPictureWindow.height}`);
        tips.textContent = '已进入画中画模式';
    });
    video.addEventListener('leavepictureinpicture', () => {
        tips.textContent = '已退出画中画模式';
    });
</script>

不知不觉已经一点钟了,晚安!(~﹃~)~zZ


画中画 视频 视频画中画 进入画中画模式 退出画中画 禁用画中画 picture-in-picture 悬浮视频 视频窗口 视频悬浮

上一篇:

下一篇: