DeathGhost

视频画中画Web API粗略

这篇文章发布于 2019年11月28日 00:54 星期四 阅读 119 次,评论 0 条

DeathGhost 编辑,归类于javascript »

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

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

视频画中画
视频画中画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>

不知不觉已经一点钟了,晚安!???

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

34

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕