完课率低迷、互动沉默、续费困难？这些问题在线教育课程可能经常遇到。问题的根源可能并非内容本身，而是课程的“体验感”缺失。想要留住课程学员，就得想办法提高课程体验感。那么，在线课程如何提高课程的体验感呢？今天这期分享6个提高课程体验感的保利威视频功能，帮您打造高口碑、高粘性的爆款课程。

1、视频点播AI大纲

2、视频自动续播功能

3、视频问答功能

4、智能字幕功能

5、多倍速播放切换功能

6、视频画中画功能

一、视频点播AI大纲

视频点播AI大纲是通过AI技术将视频课程自动生成结构化大纲和摘要。在在线教育使用场景下，视频点播AI大纲功能可以将PPT教学视频、课程教学视频，通过AI工具自动生成大纲和摘要，学员快速浏览摘要内容也可以随时点击对应的内容，进行观看。AI可以自动匹配知识点对应的视频内容，生成对应的文本大纲。

二、视频自动续播功能

视频自动续播功能，是指播放器默认会记录视频上次观看到的时间点，在同一浏览器中再次打开播放页面，会自动从上一次观看的时间点继续播放，实现流畅、不间断的观看体验，尤其适用于教学培训课程的观看场景。


<!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="视频自动续播功能，是指播放器默认会记录视频上次观看到的时间点，在同一浏览器中再次打开播放页面，会自动从上一次观看的时间点继续播放。" />
<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="mm-active"> <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>
						<li> <a href="heat-map.php"><i class='bx bx-radio-circle'></i>播放器观看热力图</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"> 视频续播/视频自动续播</h5>
							<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">代码调用示例</h5>
							
<pre  class="line-numbers"><code class="language-html">&lt;div id=&quot;player&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;//player.polyv.net/resp/vod-player/latest/player.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为'on'时会禁用续播功能
});
&lt;/script&gt;</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/continue-playing-1-02.png"  alt="视频续播/视频自动续播" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>视频自动续播(视频从上一次中断的时间点03:50，自动续播)</em></h6>
							<hr />
							<div class="card">
								<div class="card-body">
                                <img src="assets/images/continue-playing-1-03.png"  alt="视频续播/视频自动续播" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>视频自动续播(视频从上一次中断的时间点05:15，自动续播)</em></h6>
							<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',
    vid: 'ef03a1d2e50f96cc4a59b5a49bacf814_e',
          playsafe:'938351a7-098b-4d17-a129-12948109fb28-yUIDaTONYa2028', 
          ts:'1757296031000',
          sign:'b020b8c36cdffa94b10593b166f7e69b'
  });
 
</script>
	<!--js/e-->
</body>
</html>

三、视频问答功能

视频问答功能是一种互动的教学功能，在教育培训机构中，用的比较多。视频问答功能，主要是在视频播放过程中，弹出问题卡片，学员回复问题后，再继续播放，增强学员的参与度和学习效果。


<!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="在线教育、在线培训、视频教学课程如何问答播放器/视频弹题观看效果？即不能点击进度条，提前观看内容；或拖动进度条到新的位置上播放，这个在教育培训的场景中，应用非常广。" />
<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>
						<li> <a href="heat-map.php"><i class='bx bx-radio-circle'></i>播放器观看热力图</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"> 问答播放器/视频弹题功能</h5>
							<div class="lh-base mt-2">视频播放器的视频问答功能（也叫问答播放器、视频弹题、视频问答功能）是一种互动的教学功能，在教育培训机构中，用的比较多。视频问答功能，主要是在视频播放过程中，弹出问题卡片，学员回复问题后，再继续播放，增强学员的参与度和学习效果。</div>
								<div>
                                以下是该功能的一些主要特点：<br>
								<strong>01.与培训视频内容的互动性：</strong> <br>
								视频播放到特定时间点时，会弹出问题卡片，学员必须正确回答问题后才能继续观看视频；回答错误，则向前返回一小段视频，重新观看。<br>
								<strong>02.学员离线防挂机：</strong> <br> 
								通过强制学员回答问题，有效避免学员挂机现象，确保学员积极认真的参与学习。<br>
								<strong>03.课程内容防录屏、防盗录：</strong> <br> 
								问答功能可以降低盗版视频的观看体验，因为录屏后的视频无法正常播放。<br>
								</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">代码调用示例</h5>
						<p class="lh-base mt-2">问答播放器。</p>
                        <div id="myContainer" style="position: relative; background-color: #f9f9f9; padding: 10px;height:300px;overflow: hidden;padding:0;margin:0;">
<pre  class="line-numbers" style="padding:0;margin:0;padding-left:10px;"><code class="language-html" >&lt;div id=&quot;player&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;//player.polyv.net/resp/vod-player/latest/player.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  ban_seek:'on', //禁止拖动视频进度条(on,off)
  //ban_seek_by_limit_time:'on', //是否禁止视频拖拽未播放区域(on,off)
  vid: '88083abbf5bcf1356e05d39666be527a_8', 
  playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', 
  //playsafeUrl:'https://myDomain.com/token', 
  ts:'1568131545000',
  sign:'88313661ba7ded642c7b557b0a364b4b'
  });

player.on('s2j_onPlayerInitOver',
function(e) {
    var question1 = [{
        "examId": "1699e49ffeb",
        "question": "第1个问题:1 x 2 = ?",
        "choices": [{
            "answer": "1"
        },
        {
            "answer": "2",
            "right_answer": 1
        },
        {
            "answer": "3"
        },
        {
            "answer": "4"
        }],
        "answer": "",
        "wrongAnswer": "",
        "skip": true,
        "wrongTime": 5,
        "showTime": 10
    }];
    player.sendQuestion(question1);
});
window.onQuestionSkip = function(data, vid) {
    console.log('onQuestionSkip', data, vid);
}
window.onQuestionPopUp = function(data, vid) {
    console.log('onQuestionPopUp', data, vid);
}
window.onAnswerResult = function(isRight, data, msg, seekTime, vid) {
    console.log('onAnswerResult',isRight, data, msg, seekTime, vid);
    if (!isRight) {
        var question2 = [{
            "examId": "1699e49ffef",
            "question": "第2个问题:2 x 2 = ?",
            "choices": [{
                "answer": "1"
            },
            {
                "answer": "2"
            },
            {
                "answer": "3"
            },
            {
                "answer": "4",
                "right_answer": 1
            }],
            "answer": "",
            "wrongAnswer": "",
            "skip": true,
            "wrongTime": 5,
            "showTime": 10
        }];
        player.changeQuestion(10, question2);
    }
}
&lt;/script&gt;</code></pre></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">问答播放器/视频弹题观看效果截图</h5>
							<p class="lh-base mt-2">以下为问答播放器/视频弹题的效果截图：</p>
                            <div class="card">
								<div class="card-body">
                                <img src="assets/images/qa-player-1-01.png"  alt="问答播放器/视频弹题观看效果" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>问答播放器/视频弹题的效果（正常播放视频画面）</em></h6>
							<hr />
                            <div class="card">
								<div class="card-body">
                                <img src="assets/images/qa-player-1-02.png"  alt="问答播放器/视频弹题观看效果" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>问答播放器/视频弹题的效果（由于设置视频问答弹题的时间点为第95秒，所以会在该指定时间点，弹出问题）</em></h6>
                            <div>（注：弹出题目的内容，通常是视频刚刚介绍过的内容，学员在学习之后，看到弹出的问题，再进行回答，以达到强化学习要点的要求。）</div>
							<hr />
                            <div class="card">
								<div class="card-body">
                                <img src="assets/images/qa-player-1-03.png"  alt="问答播放器/视频弹题观看效果" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>问答播放器/视频弹题的效果（学员回答错误，播放器弹出回答错误的提示）</em></h6>
							<hr />
                            <div class="card">
								<div class="card-body">
                                <img src="assets/images/qa-player-1-04.png"  alt="问答播放器/视频弹题观看效果" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>问答播放器/视频弹题的效果（学员回答正确时，弹出回答正确的提示，并继续播放视频。）</em></h6>
							<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', ban_record_interaction_right_answer:'on',
    vid: 'ef03a1d2e56b28e98489335286137b0f_e',
          playsafe:'fb4507b4-839f-4ba1-9605-4984abb82810-mUIDaTONYa2028', 
          ts:'1757296127000',
          sign:'f86814b02690e2fa813e6a6fc73b1033'
  });
 
 // 获取需要应用 perfect-scrollbar 的容器元素
 const container = document.getElementById('myContainer');

// 初始化 perfect-scrollbar
// 您可以传入一个选项对象作为第二个参数来配置滚动条的行为
const ps = new PerfectScrollbar(container, {
    wheelSpeed: 1,         // 鼠标滚轮滚动速度
    wheelPropagation: true, // 当滚动到达末端时，是否将滚轮事件传播到父元素
    minScrollbarLength: 20, // 最小滚动条长度（像素）
    maxScrollbarLength: null, // 最大滚动条长度（像素）
});

// 当容器或内容大小发生变化时，需要调用 update() 方法来更新滚动条
// 例如，在内容加载完成后或窗口大小调整时
window.addEventListener('resize', () => {
    ps.update();
});

// 示例：动态添加内容并更新滚动条
setTimeout(() => {
    const contentDiv = container.querySelector('.content');
    const newParagraph = document.createElement('p');
    newParagraph.textContent = "这是延迟加载的新内容，滚动条应更新。";
    contentDiv.appendChild(newParagraph);
    ps.update(); // 内容改变后调用 update
}, 3000);

// 示例：销毁滚动条
// setTimeout(() => {
//     ps.destroy();
//     console.log('Perfect Scrollbar 已销毁。');
// }, 10000);
</script>
	<!--js/e-->
</body>
</html>

四、智能字幕功能

智能字幕功能可以把视频文件的音频转写成文字，并且制作成字幕srt格式，字幕文件可直接关联视频，达到字幕响应视频内容的效果。在不方便进行外放学习的场景中，智能字幕功能可以帮助学员更好地理解课程视频内容。

五、多倍速播放切换功能

保利威HTML5播放器自带倍速播放功能，用户可通过播放器右下方切换按钮，实现2x/1.5x/1.2x/1x/0.5x倍速切换。在线教育类网站的视频倍速播放功能，赋予了学生极大的灵活性和自主性，让他们能够根据自身情况定制学习路径和节奏，从而显著提升学习效率和效果。


<!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="保利威HTML5播放器自带倍速播放功能，用户可通过播放器右下方切换按钮，实现2x/1.5x/1.2x/1x/0.5x倍速切换。在线教育类网站的视频倍速播放功能，赋予了学生极大的灵活性和自主性，让他们能够根据自身情况定制学习路径和节奏，从而显著提升学习效率和效果。" />
<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>
						<li> <a href="heat-map.php"><i class='bx bx-radio-circle'></i>播放器观看热力图</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>
                            <span id="buylink" style="display:none"><a href="https://tony.89525.com/userlogin.php" ><img alt="多倍速播放切换/多倍速观看功能测试" src="assets/images/trial-login.png" /></a></span>
						</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"> 多倍速播放切换/多倍速观看功能 </h5>
							<div class="lh-base mt-2"> 
                            保利威HTML5播放器自带倍速播放功能，用户可通过播放器右下方切换按钮，实现2x/1.5x/1.2x/1x/0.5x倍速切换。在线教育类网站的视频倍速播放功能，赋予了学生极大的灵活性和自主性，让他们能够根据自身情况定制学习路径和节奏，从而显著提升学习效率和效果。<br>
                            <hr />
                            <h6>倍速播放功能优点：</h6>
									<div>
										<strong>01.快速观看内容/快速学习：</strong> <br>
										可以调快倍速观看内容，节省时间用于攻克学习难点。<br>
										<strong>02.慢速精听/精看：</strong> <br> 
										对于语速过快、知识点密集或需要仔细理解的部分（例如编程演示、复杂公式推导、外语听力练习），学生可以适当放慢倍速，确保每一个细节都能听清看懂。<br>
										<strong>03.克服语速差异：</strong> <br> 
										有些老师语速天生较慢，倍速播放可以帮助学生保持专注；反之，如果老师语速过快，学生也可以调慢观看。<br>
                                        <strong>04.提高学习效率/碎片化时间利用：</strong> <br> 
										可以在有限的碎片时间（如通勤路上、晚间休息），通过倍速播放快速完成课程进度，不浪费时间。<br>
										<strong>05.应对课程时长：</strong> <br> 
										有些课程视频较长，倍速播放能有效缩短观看总时长，让学生在更短时间内完成学习任务，提高学习积极性。<br>
									</div>
                                  
							</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">代码调用示例</h5>
						<p class="lh-base mt-2">视频试看功能(预览购买功能)代码，视频试看结束后，通过s2j_onPlayOver来控制CSS样式来显示和隐藏。</p>
						<pre  class="line-numbers"><code class="language-html">&lt;div id=&quot;player&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;//player.polyv.net/resp/vod-player/latest/player.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8', 
  df: 3, autoplay: 'true',
  speed:1.2,
	//取值[2, 1.5, 1.2, 0.5],设置为false则关闭倍速，可传入数组自定义显示哪几种倍速
	//速率1不需要填入，会自动添加，所设置速率值必须大于0，少于或等于3
	//最多设置6种速率（不包含1），所设置值会按由大到小自动排序
  playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', 
	//playsafeUrl:'https://myDomain.com/token', 
  ts:'1568131545000',
  sign:'88313661ba7ded642c7b557b0a364b4b'
  });
&lt;/script&gt;</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/speed-01.png"  alt="多倍速播放切换/多倍速观看_保利威" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>多倍速播放切换/多倍速观看(右下方切换按钮支持2x/1.5x/1.2x/1x/0.5x倍速切换)</em></h6>
							<hr />
							<div class="card">
								<div class="card-body">
                                <img src="assets/images/speed-02.png"  alt="多倍速播放切换/多倍速观看_保利威" width="100%">
								</div>
							</div>
							<h6 class="mb-0 text-uppercase"><em>多倍速播放切换/多倍速观看(右下方切换按钮支持2x/1.5x/1.2x/1x/0.5x倍速切换)</em></h6>
							<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',
          vid: 'ef03a1d2e5bca2ab93e4c46c2b6073bf_e',
          playsafe:'65b532b3-b51d-41fc-b976-8e50e3382188-6UIDaTONYa2028', 
          ts:'1757296224000',
          sign:'5aa6f2d56219f493f209774003f74400'
  });
  function s2j_onPlayOver(){
   document.getElementById("buylink").style.display = "block";
   document.getElementById("player").style.display = "none";
}
</script>
	<!--js/e-->
</body>
</html>

六、视频画中画功能

视频平台上的画中画效果，通常也称为小窗播放，是一种视频播放模式，允许用户将视频以小窗口的形式浮动在屏幕的其他应用或网页之上，同时继续执行其他任务。在在线教育使用场景下，学员可以边看视频边浏览其他内容。例如，一边看教程视频学习，一边在文档或网页上实践。

 【我的更多原创文章】

在线教育机构如何防范和应对课程视频侵权问题

保护付费课程不被翻录的7大视频加密技术

从“点进来”到“留下来”：在线教育机构提高课程留存率的10大功能

一篇看懂：“禁止拖动课程视频进度条”功能有什么用？

每日功能分享|提升在线教育知识掌握度的功能——AI智能大纲

在线教育课程被非法倒卖后，如何追踪泄露学员？

企业内训视频防泄密全攻略，7种视频加密方法堵住安全漏洞

每日功能介绍|在线课程提升互动效果的功能——视频问答功能

企业如何让内部视频仅限公司官网或指定域名播放?

视频加密技术和防翻录技术有哪些？

每日加密功能分享|精准锁定内容泄露者的隐形水印——AI隐形溯源水印

付费课程视频怎么做加密？教育视频文件加密的9种玩法

教育培训机构如何为课程视频添加防盗录的强水印？

在线教育培训场景下，线上授课必备的六大功能

# 音视频 # 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

猫头虎AI开源分享：如何批量获取稀土掘金社区文章阅读量暨文章阅读量数据批量提取解决方案

avatar 2048 AI社区
cover

警惕AI拟人化误导：技术本质与公众认知的鸿沟

avatar 2048 AI社区
cover

10个降AI率工具，专科生高效避坑指南

avatar 2048 AI社区