Html5视频播放器画中画播放（小窗播放）实现多任务处理

Html5视频播放器画中画播放（小窗播放）实现多任务处理，通常也称为小窗播放，它的作用主要体现在以下几个方面，极大地提升了用户体验和多任务处理的效率：

视频画中画播放效果（截图）注意右下角'画中画'按钮

视频画中画播放（截图）注意右下角小窗播放画面

视频画中画播放（截图）注意右下角小窗播放画面

1.代码调用（保利威代码实例）

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  pictureInPicture:true, pictureInPictureLevel:2,// 是否在控制栏显示画中画按钮
  vid: '88083abbf5bcf1356e05d39666be527a_8', 
  playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', 
  //playsafeUrl:'https://myDomain.com/token', 
  ts:'1568131545000',
  sign:'88313661ba7ded642c7b557b0a364b4b'
  });
</script>

2.视频画中画播放、小窗播放实现多任务处理

01. 提升多任务处理效果

这是画中画最核心的作用。边看视频边浏览其他内容： 例如，一边看教程视频学习，一边在文档或网页上实践；不中断观看体验： 当用户需要暂时离开视频应用去回复消息、查看地图或处理其他事情时，视频不会暂停或关闭，而是以小窗口的形式继续播放，保证了观看的连贯性。

02.增强用户粘性

减少跳出率： 用户不再需要为了其他任务而完全退出视频应用，从而降低了用户流失到其他应用的概率。延长观看时长： 即使在进行其他操作时，视频也能持续播放，增加了用户在平台上的总观看时长。

03.优化设备使用场景

充分利用屏幕空间： 小窗模式可以更好地利用屏幕的边角空间，使得视频内容在后台也能被看到。

04.提升用户自由度

个性化观看体验： 用户可以根据自己的需求，随时调整小窗的大小和位置，使得观看体验更加个性化和灵活。

视频平台的画中画效果是为了满足用户日益增长的多任务处理需求而生，它让视频观看变得更加灵活、高效，也让用户能够更充分地利用碎片化时间。

3.原生html5代码

主要优点：

• 用户体验好： 视频可以在独立的、浮动的窗口中播放，即便用户切换到其他标签页或应用程序。

• 浏览器原生支持： 性能优化由浏览器处理。

实现步骤：

1. 获取视频元素： 首先需要一个 <video> 元素。

2. 监听用户交互： 通常会有一个按钮让用户触发小窗模式。

3. 请求画中画模式： 当用户点击按钮时，调用视频元素的 requestPictureInPicture() 方法。

4. 处理画中画事件： 监听 enterpictureinpicture 和 leavepictureinpicture 事件，以便在进入/退出画中画模式时更新 UI。

<video id="myVideo" src="your_video.mp4" controls width="640" height="360"></video>
<button id="pipButton">小窗播放</button>

<script>
    const video = document.getElementById('myVideo');
    const pipButton = document.getElementById('pipButton');

    // 检查浏览器是否支持画中画
    if ('pictureInPictureEnabled' in document) {
        pipButton.addEventListener('click', () => {
            if (document.pictureInPictureElement) {
                // 如果已经在画中画模式，则退出
                document.exitPictureInPicture()
                    .catch(error => console.error('退出画中画失败:', error));
            } else {
                // 请求进入画中画模式
                video.requestPictureInPicture()
                    .catch(error => console.error('进入画中画失败:', error));
            }
        });

        // 监听画中画模式的进入和退出
        video.addEventListener('enterpictureinpicture', () => {
            console.log('视频已进入画中画模式');
            pipButton.textContent = '退出小窗';
        });

        video.addEventListener('leavepictureinpicture', () => {
            console.log('视频已退出画中画模式');
            pipButton.textContent = '小窗播放';
        });
    } else {
        pipButton.disabled = true;
        pipButton.textContent = '您的浏览器不支持小窗';
    }
</script>

<style>
    body {
        margin: 0;
        height: 200vh; /* 模拟页面滚动 */
    }
    #videoWrapper {
        position: relative; /* 初始位置 */
        width: 640px;
        height: 360px;
        background-color: black;
        overflow: hidden; /* 确保视频内容不溢出 */
    }
    #myVideo {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持视频比例 */
    }

    /* 小窗模式样式 */
    .mini-player #videoWrapper {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 320px; /* 小窗宽度 */
        height: 180px; /* 小窗高度 */
        z-index: 9999; /* 确保在其他内容之上 */
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        transition: all 0.3s ease-in-out; /* 平滑过渡 */
    }
    .mini-player #myVideo {
        /* 在小窗模式下可能需要调整控件显示或隐藏 */
    }
</style>

<div id="videoWrapper">
    <video id="myVideo" src="your_video.mp4" controls></video>
    <button id="toggleMiniPlayer" style="position: absolute; top: 10px; right: 10px;">小窗</button>
</div>

<p style="margin-top: 400px;">这里是页面的其他内容，可以滚动。</p>

<script>
    const videoWrapper = document.getElementById('videoWrapper');
    const toggleMiniPlayerBtn = document.getElementById('toggleMiniPlayer');
    const myVideo = document.getElementById('myVideo');

    let isMiniPlayer = false;

    toggleMiniPlayerBtn.addEventListener('click', () => {
        isMiniPlayer = !isMiniPlayer;
        if (isMiniPlayer) {
            document.body.classList.add('mini-player');
            toggleMiniPlayerBtn.textContent = '退出小窗';
            // 可以根据需要在此处控制视频的播放/暂停
            // myVideo.play();
        } else {
            document.body.classList.remove('mini-player');
            toggleMiniPlayerBtn.textContent = '小窗';
            // myVideo.play(); // 退出小窗后可能希望继续播放
        }
    });

    // 拖拽功能（简化版，仅供参考）
    let isDragging = false;
    let offsetX, offsetY;

    videoWrapper.addEventListener('mousedown', (e) => {
        if (isMiniPlayer && e.target !== myVideo && e.target !== toggleMiniPlayerBtn) {
            isDragging = true;
            offsetX = e.clientX - videoWrapper.getBoundingClientRect().left;
            offsetY = e.clientY - videoWrapper.getBoundingClientRect().top;
            videoWrapper.style.cursor = 'grabbing';
        }
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            videoWrapper.style.left = (e.clientX - offsetX) + 'px';
            videoWrapper.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        videoWrapper.style.cursor = 'grab';
    });
</script>

 我的热门文章汇总：

• 开通微信视频号直播需要满足哪些条件？
• 彻底永久关闭WIN10系统的自动更新（操作步骤）
• 视频码率、帧率、分辨率、视频标清、高清、全高清的全面介绍与参考表
• Thinkpad电脑系列产品进入Bios设置和U盘启动（重装系统）
• 网线水晶头接法图解详细8根线芯顺序排序图示

我的在线教育原创文章汇总：

• Vue3框架对接保利威云点播播放器的实践（实例）
• 视频点播web端AI智能大纲(自动生成视频内容大纲)的代码与演示
• html5视频播放器的断点续播和记忆播放是如何做的？
• 视频安全之视频防盗链和视频防盗录
• 课程学习网站视频禁止拖拽快进是如何做的？
• 数字化动态ID做随机水印实现视频防录屏的效果
• 在线教育视频中实用的视频问答互动（应用实例）
• 教培机构在线视频播放器的视频问答功能（视频弹题、问答播放）的实现
• 视频加密：教育机构视频培训内容如何做视频加密？

我的谷歌浏览器相关文章汇总：

• 如何在Google Chrome浏览器中禁用密码联想与保存功能
• 谷歌google网页索引编制报告的介绍
• 谷歌Google抓取视频使用受支持的视频文件类型
• Chrome 浏览器调试日志查询
• 前端实现页面自动播放音频方法