在快节奏的数字生活中，如何高效利用屏幕空间，实现“一心多用”？视频画中画功能正是为解决这一需求而生。今天这篇文章将详细介绍视频画中画这个实用功能。
一、视频画中画功能
视频平台上的画中画（Picture-in-Picture, PIP）效果，通常也称为小窗播放，是一种视频播放模式，允许用户将视频以小窗口的形式浮动在屏幕的其他应用或网页之上，同时继续执行其他任务。
视频画中画功能代码调用示例
<!doctype html>
<html lang="cn" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet">
<link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
<link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet">
<link href="assets/css/pace.min.css" rel="stylesheet">
<script src="assets/js/pace.min.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-extended.css" rel="stylesheet">
<link href="assets/sass/app.css" rel="stylesheet">
<link href="assets/css/icons.css" rel="stylesheet">
<link rel="stylesheet" href="assets/sass/bordered-theme.css">
<title>保利威视频画中画播放</title>
<meta name="Keywords" content="视频画中画播放,小窗播放,视频小窗" />
<meta name="Description" content="视频平台上的画中画（Picture-in-Picture, PIP）效果，通常也称为小窗播放，它的作用主要体现在以下几个方面，极大地提升了用户体验和多任务处理的效率" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
</head>
<body>
<!--wrapper-->
<div class="wrapper">
<!--sidebar/b-->
<div class="sidebar-wrapper" data-simplebar="true">
<div class="sidebar-header">
<div>
<img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
</div>
<div>
<h4 class="logo-text">H5Player</h4>
</div>
<div class="mobile-toggle-icon ms-auto"><i class='bx bx-x'></i>
</div>
</div>
<!--nav/b-->
<ul class="metismenu" id="menu">
<li>
<a href="javascript:;" class="has-arrow">
<div class="parent-icon"><i class="bx bx-category"></i>
</div>
<div class="menu-title">教育场景视频应用</div>
</a>
<ul> <li class="none"> <a href="index.php"><i class='bx bx-radio-circle'></i>H5多终端调用范例</a></li>
<li class="none"> <a href="vrm.php"><i class='bx bx-radio-circle'></i>VRM分片错序加密</a></li>
<li class="none"> <a href="userid.php"><i class='bx bx-radio-circle'></i>用户ID跑马灯 </a></li>
<li class="none"> <a href="random-watermark.php"><i class='bx bx-radio-circle'></i>数字化动态ID随机水印</a></li>
<li class="none"> <a href="ai-invisible-watermark.php"><i class='bx bx-radio-circle'></i>AI隐形溯源水印</a></li>
<li class="none"> <a href="no-screen-recording.php"><i class='bx bx-radio-circle'></i>浏览器防录屏</a></li>
<li class="none"> <a href="OVP.php"><i class='bx bx-radio-circle'></i>OVP视频防盗链</a></li>
<li class="none"> <a href="ats-https.php"><i class='bx bx-radio-circle'></i>ATS/HTTPS数据防篡改</a></li>
<li class="none"> <a href="watermark.php"><i class='bx bx-radio-circle'></i>视频水印/企业图标</a></li>
<li class="none"> <a href="no-seeking.php"><i class='bx bx-radio-circle'></i>禁止拖动视频进度条</a></li>
<li class="none"> <a href="multilingual-subtitles.php"><i class='bx bx-radio-circle'></i>智能字幕/自动生成字幕</a></li>
<li class="none"> <a href="continue-playing.php"><i class='bx bx-radio-circle'></i>视频自动续播</a></li>
<li class="none"> <a href="trial.php"><i class='bx bx-radio-circle'></i>片段试看/试听购买</a></li>
<!--li> <a href="collector.php"><i class='bx bx-radio-circle'></i>视频信息收集器</a></li-->
<li> <a href="qa-player.php"><i class='bx bx-radio-circle'></i>问答播放器/视频弹题</a></li>
<li> <a href="speed.php"><i class='bx bx-radio-circle'></i>倍速播放/多倍速观看</a></li>
<li> <a href="quality.php"><i class='bx bx-radio-circle'></i>多清晰度切换/画质切换</a></li>
<li> <a href="knowledge-list.php"><i class='bx bx-radio-circle'></i>知识清单/知识点提示</a></li>
<li> <a href="data-analysis.php"><i class='bx bx-radio-circle'></i>数据分析/数据司南</a></li>
<li> <a href="cn-en-player.php"><i class='bx bx-radio-circle'></i>中英文播放器</a></li>
<li> <a href="ai-course.php"><i class='bx bx-radio-circle'></i>AI智能制课</a></li>
<li> <a href="ai-outline.php"><i class='bx bx-radio-circle'></i>视频点播AI大纲</a></li>
<li> <a href="picture-in-picture.php"><i class='bx bx-radio-circle'></i>视频画中画(PC端)</a></li>
</ul>
</li>
<li>
<a href="faq.php">
<div class="parent-icon"><i class="bx bx-help-circle"></i>
</div>
<div class="menu-title">FAQ</div>
</a>
</li>
</ul> <!--nav/e-->
</div>
<!--sidebar/e -->
<!--header/b -->
<header>
<div class="topbar">
<nav class="navbar navbar-expand gap-2 align-items-center">
<div class="mobile-toggle-menu d-flex"><i class='bx bx-menu'></i>
</div>
<div class="top-menu ms-auto">
<ul class="navbar-nav align-items-center gap-1">
<li class="nav-item dark-mode d-none d-sm-flex">
</li>
</ul>
</div>
<div class="user-box dropdown px-3">
<a class="d-flex align-items-center nav-link " href="userlogin.php" role="button" >
<img src="assets/images/mypic_no.jpg" class="user-img" alt="userpic">
<div class="user-info">
<p class="user-name mb-0">USER</p>
<p class="designattion mb-0">LOGIN</p>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item d-flex align-items-center" href="userlogin.php"><i class="bx bx-user fs-5"></i><span>用户登录</span></a>
</li>
</ul>
</div>
</nav>
</div>
</header> <!--header/e -->
<!--mainpage/b -->
<div class="page-wrapper">
<div class="page-content">
<!--breadcrumb-->
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
<div class="breadcrumb-title pe-3">Edu H5Player</div>
<div class="ps-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0 p-0">
<li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
</li>
<li class="breadcrumb-item active" aria-current="page">Demo</li>
</ol>
</nav>
</div>
</div>
<!--end breadcrumb-->
<div class="row">
<div class="col-12 col-lg-9 mx-auto">
<div class="text-center">
<div id="player"></div>
</div>
<div class="text-center">
<hr />
<h5 class="mb-0">Edu Html5Player加密视频播放器</h5>
<hr />
</div>
</div>
<div class="col-12 col-lg-9 mx-auto">
<div class="table-responsive-lg w-lg-75 mx-lg-auto table-wrapper" >
<h5 class="mb-0 text-uppercase fw-bold lh-base mt-2">视频画中画播放（Picture-in-Picture, PIP）效果</h5>
<div class="lh-base mt-2">视频平台上的画中画（Picture-in-Picture, PIP）效果，通常也称为小窗播放，它的作用主要体现在以下几个方面，极大地提升了用户体验和多任务处理的效率：</div>
<div>
<strong>01. 提升多任务处理效率：</strong> <br>
这是画中画最核心的作用。边看视频边浏览其他内容： 例如，一边看教程视频学习，一边在文档或网页上实践；不中断观看体验： 当用户需要暂时离开视频应用去回复消息、查看地图或处理其他事情时，视频不会暂停或关闭，而是以小窗口的形式继续播放，保证了观看的连贯性。<br>
<strong>02.增强用户粘性：</strong> <br>
减少跳出率： 用户不再需要为了其他任务而完全退出视频应用，从而降低了用户流失到其他应用的概率。延长观看时长： 即使在进行其他操作时，视频也能持续播放，增加了用户在平台上的总观看时长。<br>
<strong>03.优化设备使用场景：</strong> <br>
充分利用屏幕空间： 小窗模式可以更好地利用屏幕的边角空间，使得视频内容在后台也能被看到。<br>
<strong>04.提升用户自由度：</strong> <br>
个性化观看体验： 用户可以根据自己的需求，随时调整小窗的大小和位置，使得观看体验更加个性化和灵活。
</div>
<div class="lh-base mt-2">视频平台的画中画效果是为了满足用户日益增长的多任务处理需求而生，它让视频观看变得更加灵活、高效，也让用户能够更充分地利用碎片化时间。</div>
</div>
</div>
<div class="col-12 col-lg-9 mx-auto">
<div class="table-responsive-lg w-lg-75 mx-lg-auto table-wrapper" >
<hr />
<h5 class="mb-0 text-uppercase fw-bold lh-base mt-2">代码调用示例(1)</h5>
<p class="lh-base mt-2">视频画中画播放。</p>
<pre class="line-numbers"><code class="language-html"><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></code></pre>
</div>
</div>
<div class="col-12 col-lg-9 mx-auto">
<div class="table-responsive-lg w-lg-75 mx-lg-auto table-wrapper" >
<hr />
<h5 class="mb-0 text-uppercase fw-bold lh-base mt-2">视频效果截图</h5>
<p class="lh-base mt-2">以下为视频画中画播放功能的截图：</p>
<div class="card">
<div class="card-body">
<img src="assets/images/picture-in-picture-1.png" alt="视频画中画播放功能-提升多任务处理效率" width="100%">
</div>
</div>
<div class="mb-0 "><em>视频画中画播放效果（截图）注意右下角'画中画'按钮</em></div>
<hr />
<div class="card">
<div class="card-body">
<img src="assets/images/picture-in-picture-2.png" alt="视频画中画播放功能-增强用户粘性" width="100%">
</div>
</div>
<div class="mb-0 "><em>视频画中画播放（截图）注意右下角小窗播放画面</em></div>
<hr />
<div class="card">
<div class="card-body">
<img src="assets/images/picture-in-picture-3.png" alt="视频画中画播放功能-优化设备使用场景" width="100%">
</div>
</div>
<div class="mb-0 "><em>视频画中画播放（截图）注意右下角小窗播放画面</em></div>
<hr />
</div>
</div>
</div>
<!--end row-->
</div>
</div>
<!--mainpage/e-->
<!--overlay/b-->
<div class="overlay toggle-icon"></div>
<!--overlay/e--->
<!--BackToTop/b--> <a href="javaScript:;" class="back-to-top"><i
class='bx bxs-up-arrow-alt'></i></a>
<!--BackToTop/e-->
<footer class="page-footer">
<p class="mb-0">教育培训场景视频加密与视频应用演示(DEMO)</p>
</footer> </div>
<!--wrapper/e-->
<!--js/b-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
<script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
<script src="assets/js/app.js"></script>
<!--script src="//player.polyv.net/resp/vod-player/latest/player.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src='//player.polyv.net/resp/vod-player-drm/canary/player.js'></script>
<script>
var pdiv = document.getElementById("player");
var w = pdiv.offsetWidth; // 返回元素的总宽度
var h = pdiv.offsetWidth*0.5625; // 返回元素的总高度
var player = polyvPlayer({
wrap: '#player',
width: '100%',
height: h, df: 3, autoplay: 'true',pictureInPicture:true, pictureInPictureLevel:2,// 是否在控制栏显示画中画按钮。仅在PC H5播放器生效，仅在播放非加密视频时生效。
vid: 'ef03a1d2e5f7d70cc7cd8e8a2eae8d70_e',
playsafe:'3299b8ce-97b0-4cca-93d9-2f2f06110536-xUIDaTONYa2028',
ts:'1753757689000',
sign:'39f3f3a430d8ec81c33e7d9f7634509e'
});
</script>
<!--js/e-->
</body>
</html>视频画中画功能效果示例
二、视频画中画功能的作用
1、提升多任务处理效率
这是画中画最核心的作用。学员可以边看视频边浏览其他内容。例如，一边看教程视频学习，一边在文档或网页上实践。画中画还可以不中断学员观看，保证视频观看连贯性：当用户需要暂时离开视频应用去回复消息、查看地图或处理其他事情时，视频不会暂停或关闭，而是以小窗口的形式继续播放，保证了观看的连贯性。
2、增强用户粘性
画中画功能，可以减少跳出率，用户不再需要为了其他任务而完全退出视频应用，从而降低了用户流失到其他应用的概率。与此同时，画中画功能还可以延长观看时长： 即使在进行其他操作时，视频也能持续播放，增加了用户在平台上的总观看时长。
3、提升用户自由度
画中画功能提供用户个性化观看体验： 用户可以根据自己的需求，随时调整小窗的大小和位置，使得观看体验更加个性化和灵活。
三、视频画中画功能的应用场景
1、企业培训与在线教育
在实操课程学习时，学员可以跟随主画面教程操作软件（如设计工具），小窗持续展示操作要点提示。
2、视频会议与远程协作
主屏幕可以展示共享文档/幻灯片，小窗显示发言人实时画面，增强沟通临场感。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
