还不会模仿b站的画中画播放视频，让Trae来教会你吧

前言

在如今这个信息爆炸的时代，我们的生活节奏越来越快，时间也变得越发宝贵。很多时候，我们希望能够一边做自己的事情，一边享受娱乐内容。

B站作为国内领先的视频分享平台，拥有海量的优质视频资源，从搞笑短片到知识科普，从动漫番剧到纪录片，应有尽有。而画中画功能的出现，无疑为我们的多任务娱乐生活带来了极大的便利。

今天，就让Trae来带你一探究竟，教你如何轻松开启B站的画中画模式，让娱乐与效率并存。

一、认识画中画功能

网页的画中画功能，顾名思义，就是可以在一个视频播放的同时，将另一个视频以小窗口的形式悬浮在屏幕的任意位置。

这样，你就可以在浏览网页、处理文档或者做其他事情的时候，同时观看两个视频。

比如，你可以一边跟着一个美食教程视频学习做饭，一边在另一个小窗口里播放着搞笑视频来缓解压力；或者在写作业的时候，让一个知识讲解视频在旁边的小窗口里播放，随时查阅知识点，这样就可以做到事半功倍的效果，有更多的时间可以摸鱼，啊哈哈哈。

向Trae提问，新建一个文件夹，帮我实现一个b站的视频画中画功能，要求代码简洁易懂

先来看看Trae生成的结果

小窗口已经可以随意拖动，这个效果是不是很不错，那么Trae是怎么做得呢？怎么实现的呢？

Trae有做兼容，如果是低版本的浏览器不支持的话，会有文本提示
您的浏览器不支持视频播放

Trae生成的代码，主要是这一块，创建一个画中画窗口，然后将视频的创建一个副本，暂停原来的视频，并添加可以拖拽的api，在原来的页面的按钮变成关闭画中画

ini 复制代码

// 创建画中画窗口
function createPIP() {
    if (pipWindow) {
        closePIP();
        return;
    }

    // 创建画中画窗口
    pipWindow = document.createElement('div');
    pipWindow.className = 'pip-window';
    
    // 创建关闭按钮
    const closeBtn = document.createElement('button');
    closeBtn.className = 'pip-close';
    closeBtn.innerHTML = '×';
    closeBtn.addEventListener('click', closePIP);
    
    // 创建视频副本
    const pipVideo = video.cloneNode(true);
    pipVideo.currentTime = video.currentTime;
    pipVideo.play();
    
    // 组装窗口
    pipWindow.appendChild(closeBtn);
    pipWindow.appendChild(pipVideo);
    document.body.appendChild(pipWindow);
    
    // 暂停原视频
    video.pause();
    
    // 添加拖拽功能
    makeDraggable(pipWindow);
    
    // 更新按钮文字
    pipBtn.textContent = '关闭画中画';
}

这是关闭画中画的方法，主要是移除刚刚创建的窗口

ini 复制代码

// 关闭画中画
function closePIP() {
    if (!pipWindow) return;
    
    const pipVideo = pipWindow.querySelector('video');
    const currentTime = pipVideo.currentTime;
    
    // 同步播放进度
    video.currentTime = currentTime;
    
    // 移除画中画窗口
    document.body.removeChild(pipWindow);
    pipWindow = null;
    
    // 恢复原视频播放
    video.play();
    
    // 更新按钮文字
    pipBtn.textContent = '开启画中画';
}

这个是拖拽函数

ini 复制代码

function makeDraggable(element) {
    element.addEventListener('mousedown', startDrag);
    element.addEventListener('touchstart', startDrag);
    
    function startDrag(e) {
        isDragging = true;
        const clientX = e.clientX || e.touches[0].clientX;
        const clientY = e.clientY || e.touches[0].clientY;
        
        dragOffset.x = clientX - element.offsetLeft;
        dragOffset.y = clientY - element.offsetTop;
        
        element.style.cursor = 'grabbing';
    }
    
    document.addEventListener('mousemove', drag);
    document.addEventListener('touchmove', drag);
    
    function drag(e) {
        if (!isDragging) return;
        
        e.preventDefault();
        const clientX = e.clientX || e.touches[0].clientX;
        const clientY = e.clientY || e.touches[0].clientY;
        
        const newX = clientX - dragOffset.x;
        const newY = clientY - dragOffset.y;
        
        // 边界检查
        const maxX = window.innerWidth - element.offsetWidth;
        const maxY = window.innerHeight - element.offsetHeight;
        
        element.style.left = Math.max(0, Math.min(newX, maxX)) + 'px';
        element.style.top = Math.max(0, Math.min(newY, maxY)) + 'px';
    }
    
    document.addEventListener('mouseup', stopDrag);
    document.addEventListener('touchend', stopDrag);
    
    function stopDrag() {
        isDragging = false;
        if (element) {
            element.style.cursor = 'move';
        }
    }
}

总结

是不是很有趣，快去试试看，让Trae教会你实现b站同款的画中画功能吧~