如何在JavaScript中切换画中画（PiP）模式的视频源？

你完全不需要退出再重启PiP窗口，直接修改当前处于PiP状态的<video>元素的视频源即可，PiP窗口会自动同步更新内容，不会有窗口关闭重启的突兀感。

核心实现思路 #

• 始终复用同一个<video>元素承载PiP窗口，不要每次切换都使用新的video标签
• 切换到新的发言/共享屏幕用户时，直接更新该video元素的srcObject（适配WebRTC媒体流这类视频源）或src（适配视频文件/URL源）
• 浏览器的PiP机制会自动监听video元素的源变化，实时更新PiP窗口内容

代码示例 #

假设你已经有一个处于PiP状态的video元素pipVideo，切换源的代码如下：

切换WebRTC媒体流（视频会议常用场景）

// newStream为新的发言/共享屏幕用户的MediaStream
const pipVideo = document.getElementById('pip-video');
pipVideo.srcObject = newStream;
// 无需调用任何PiP相关API，窗口会自动更新内容

切换视频URL源

const pipVideo = document.getElementById('pip-video');
pipVideo.src = '新的视频URL地址';
pipVideo.load(); // 需要立即加载新源时可调用

注意事项 #

• 必须复用同一个video元素，避免每次切换都创建新元素再调用requestPictureInPicture
• WebRTC流切换srcObject后无需额外操作，浏览器会自动处理流的切换
• 部分旧版浏览器可能存在兼容性问题，建议提前检查浏览器是否支持PictureInPictureWindow以及video元素的srcObject属性
• 若切换后PiP窗口未更新，可尝试触发video元素的play()方法（确保视频处于播放状态）

内容的提问来源于stack exchange，提问作者Owenn