专栏首页JS菌浏览器画中画模式

浏览器画中画模式

浏览器画中画模式

浏览器画中画功能允许用户在一个小的叠加窗口中弹出网页中播放的视频 ?,Chrome 版本大于 71 均默认开启该功能。下面简单介绍一下该 API 如何使用 ?

准备工作

首先要有个 video,以及一个 btn ⏹ 用来 toggle 画中画功能

<video id="video" src="./mix3.mp4" controls autoplay></video>
<button id="toggle">toggle</button>

js 部分

js 部分很简单,只需要调用 video 元素的 requestPictureInPicture 方法即可,然后再调用 document 对象下的 exitPictureInPicture 方法就可以关闭画中画功能了 ?

另外,document 对象下的 pictureInPictureElement 指向画中画功能生效的那个 video 元素,如果没有开启画中画,那么返回值是 null

还有就是上述两个 API 都是异步的,始终返回 Promise

const btn = document.querySelector('#toggle')
const vid = document.querySelector('#video')

async function handleToggle() {
    try { // 捕获 async-await 错误 ❌
        if (vid !== document.pictureInPictureElement) { // 判断当前 PictureInPicture 是否已经开启并是否指向该 video
            await vid.requestPictureInPicture() // 调用 API 开启功能 ⭕️
        } else {
            await document.exitPictureInPicture() // 调用 API 关闭功能 ⛔️
        }
        this.disabled = true // toggle 按钮避免频繁触发
    } catch (error) {
        // error handler 错误处理 ❌
    } finally {
        this.disabled = false
    }
}

btn.addEventListener('click', handleToggle)

这样就完成了,效果如下:

相关事件

如果需要监听是否开启或关闭画中画功能,可以使用下面两个事件:

vid.addEventListener('enterpictureinpicture', function() { console.warn('on') })
vid.addEventListener('leavepictureinpicture', function() { console.warn('off') })

如果需要监听画中画尺寸 resize 操作:

let pipWindow

vid.addEventListener('enterpictureinpicture', function (event) {
    pipWindow = event.pictureInPictureWindow // 获取当前 pip 窗口 ?
    console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`) // width height 属性获得宽高
    pipWindow.addEventListener('resize', onPipWindowResize)
})

vid.addEventListener('leavepictureinpicture', function (event) {
    pipWindow.removeEventListener('resize', onPipWindowResize)
})

function onPipWindowResize(event) {
    console.log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`)
    // chrome 建议根据 window 尺寸大小动态调节 video 质量
}

检查是否可用

可能浏览器不支持画中画功能,即便是浏览器支持,可能用户手动关闭或 CFP 的禁止导致无法使用该功能 ?

检查浏览器是否支持:

if (!('pictureInPictureEnabled' in document)) {}

检查是否可用:

if (!document.pictureInPictureEnabled) {}

根据上述判断来动态添加画中画功能按钮:

if ('pictureInPictureEnabled' in document) {
    // 支持的情况显示按钮
    setPipButton()
    videoElement.addEventListener('loadedmetadata', setPipButton)
    videoElement.addEventListener('emptied', setPipButton)
} else {
    // 不支持的情况隐藏按钮
    pipButtonElement.hidden = true
}

function setPipButton() {
    pipButtonElement.disabled = (videoElement.readyState === 0) || !document.pictureInPictureEnabled || videoElement.disablePictureInPicture
}

流媒体的支持

另外画中画功能还支持流媒体。如用户的摄像头、用户屏幕实时共享以及 canvas ?:

摄像头的支持:

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
video.play()

// Later on, video.requestPictureInPicture();

屏幕实时共享:

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true });
video.play();

// Later on, video.requestPictureInPicture();

canvas:

const canvas = document.createElement('canvas');
// Draw something to canvas.
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

const video = document.createElement('video');
video.muted = true;
video.srcObject = canvas.captureStream();
video.play();

// Later on, video.requestPictureInPicture();

获取用户屏幕用到了 screenCapture API

当然这需要用户点击同意才可获得授权

共享过程中会有个 banner 点击停止共享即可停止录制

DEMO 见:https://webrtc.github.io/samples/src/content/getusermedia/getdisplaymedia/

与画中画结合的效果可以看这个 demo:

https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture

文章分享自微信公众号:
JS菌

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • IE的浏览器模式、文本模式

    IE的浏览器模式,用于切换IE针对该网页的默认文本模式、对不同版本浏览器的条件注释解析、决定请求头里userAgent的值。它在浏览器发出请求之前就已经确定,网...

    菜的黑人牙膏
  • Chrome浏览器模拟手机浏览器

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。谷歌Chrome浏览器,可以很方便地用...

    似水的流年
  • 浏览器中的JavaScript核心BOM(浏览器对象模型)

    在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多...

    @零一
  • 【前端】:浏览器渲染模式

    在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator准备的版本以及为微软(Microsoft)的 Internet Expl...

    WEBJ2EE
  • 人生想要开挂,快来学习“画中画”!

    首先请允许我介绍下“画中画”:画中画(英文Picture-in-picture,缩写PiP)是指将一个电视节目(或其他画面)显示在整个画面上,同时将另一个或多个...

    腾讯IVWEB团队
  • 读Zepto源码之Fx模块

    fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能,在 fx 模块中,只做了事件和样式浏览器前缀的补全,没有做太多的兼容。对于不支持...

    对角另一面
  • 浏览器中的ECMAScript模块(译)

    本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://jakearchibald.com/20...

    IMWeb前端团队
  • 浏览器中的ECMAScript模块(译)

    原文:https://jakearchibald.com/2017/es-modules-in-browsers/

    IMWeb前端团队
  • 复杂帧动画之移动端video采坑实现

    Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台的动画效果解决方案;lottie 在辅导中已经有实际应用,使用过的同学都表示对其实现效...

    IMWeb前端团队
  • 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    Sb_Coco
  • 推荐一款只需浏览器便可一键录屏的神器 RecordScreen.io

    录制屏幕操作很多方法,电脑、手机,有各式各样录屏软件可以使用,有些是系统内建,有些只要安装一个 Google 浏览器插件就可以使用。

    iMike
  • selenium中将chrome浏览器设置成手机模式

    chrome浏览器可以模拟手机模式,打开chrome,然后按F12,然后点击下图中红框中手机的标识,切换成手机模式

    kirin
  • HTML界的“苏炳添”——详解Canvas优越性能和实际应用

    Google Docs宣布将会把HTML迁移到基于Canvas渲染,这一消息的出现再次把几年前随HTML5诞生的标签重新推到了人们视线之中。Canvas在刚推出...

    葡萄城控件
  • requestAnimationFrame实现动画效果

    html动画一般会采用css3的形式去做,当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成,常用的js动画方案是使用计时器来完成。编写动画循...

    OECOM

扫码关注云+社区

领取腾讯云代金券