html5视频播放器代码实例(含倍速、清晰度切换、续播)

本文将对视频播放相关的功能进行说明（基于云平台），包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等。

 图 / html5视频播放器调用效果（倍速切换）

  图 / html5视频播放器调用效果（超清/高清/流畅画质切换）

初始化播放器

Polyv Web播放器同时支持Flash和HTM5两种播放模式，并可以根据终端和浏览器环境自动选择最优播放模式。默认优先使用HTML5，在不支持HTML5播放的浏览器下（如低版本的IE浏览器）会自动切换到Flash播放。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});

player.on('s2j_onPlayStart', () => { //订阅视频开始播放事件
    console.info('视频开始播放');
    player.j2s_seekVideo(60); //视频seek到第60秒
});
</script>

更多设置功能请查阅：属性和接口说明。

可通过 player.isSupportHTML5 检测当前浏览器是否支持 H5 播放。若当前浏览器（如IE9、IE10）不支持 H5 ，会自动切换为Flash播放器。

请尽量不要对播放器的样式进行修改或者对video标签进行修改。

尽量避免在有animation和transform等css3的元素或者子元素下初始化播放器，因为这些元素可能会导致播放器全屏样式错乱，这属于浏览器的一个bug，请谅解。

播放器尺寸设置

播放器的尺寸可通过 width和height两个参数进行设置。参数支持像素和百分比类型的值。

代码示例： 

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: '80%', // 播放器宽，支持像素值和百分比两种类型，默认值为'100%'
    height: '60%', // 播放器高，支持像素值和百分比两种类型，默认值为'auto'
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});
</script>

如果不指定参数width的值，播放器宽会使用默认值：100%，即与父容器的宽一致。

如果不指定参数height的值，播放器高会使用默认值：'auto',即根据视频分辨率比例自动适配。

视频切换（连续播放）

当前播放器实例可以使用changeVid接口切换正在播放的视频。当有多个视频，在上一个视频播放完毕时，自动播放下一个视频时也可采用该处理方式。

代码示例：

const option = {
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //autoplay: true,
  //playsafe: '', //PC端播放加密视频需要传playsafe参数
  //sign: '',// 移动端H5播放加密视频需要传 sign、ts参数
  //ts: '', 
  //watchStartTime: 100, // 从第100秒开始播放
  //skipTeaser: false, //切换视频后是否跳过片头直接播放正片
  //ban_seek: 'off', // 是否禁止拖拽进度，值为'on'时将会禁止拖拽进度。
  //ban_seek_by_limit_time: 'off',  // 是否禁止拖拽进度至视频未播放的位置，为'on'时只可在已播放过的进度范围内拖拽（向前拖拽）。
  viewerInfo: { //切换视频时设置观众信息，非必填
        viewerId: '1555313336634', // 观众ID
        viewerName: 'polyv', // 观众昵称
        viewerAvatar: 'https://my.domain.com/user/avatar.png', // 观众头像URL
        viewerExtraInfo1:'', // 自定义额外信息字段1
        viewerExtraInfo2:'', // 自定义额外信息字段2
        viewerExtraInfo3:'' // 自定义额外信息字段3
     }
};
player.on('s2j_onPlayOver', () => {
    console.info('视频播放完毕');
    player.changeVid(option); // 切换下一个视频
});

清晰度切换

视频上传保利威云点播平台后会转码成多个清晰度的视频文件，详见​  视频清晰度与码率。 ​可通过参数和接口控制清晰度的选择和切换。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  showHd: true, // 播放器控制栏是否显示清晰度切换的按钮，默认为 true
  show_rate:2, // 允许选择的最高清晰度，取值：{1,2}。值为1时，只显示流畅，值为2时，可选流畅和高清。不设置时会显示全部清晰度。
  df:1  //视频播放默认采用的清晰度，取值：{0,1,2,3}，分别对应自动、流畅、高清、超清。
});
const hd = 3;
player.switchBitrate(hd);// 切换到超清。
</script>

倍速切换

H5播放器默认开启倍速播放功能。可通过参数进行自定义控制。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  //speed:false, //当参数值为boolean类型时，表示是否显示倍速切换的按钮。
  speed: [0.5, 1, 1.25, 1.5, 2] //当参数值为数组时，表示倍速切换的可选速率。最多可设置6个速率，取值范围：(0,3]。PC端默认值为：[2, 1.5, 1.2, 0.5]，移动端默认值为：[1, 1.5, 2]。
});
</script>

线路切换

保利威视频云拥有多条CDN加速线路，当某一条线路出现问题时，可切换至另一线路。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    showLine: 'on' // 是否显示线路切换按钮
});
</script>

注：线路切换暂时只支持在移动端H5播放器上使用。

视频预览

在一些场景下，希望只允许观众观看视频的一部分，付费或者注册后才允许观看完整视频。该场景可通过传入预览vid或者设置参数使用预览模式来实现。预览vid可通过管理后台的预览代码来获取，预览时长可在点播管理后台进行设置。

 代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',  
    preview:true // 是否使用预览模式，到达预览时长后会停止播放
});
</script>

当传入预览vid时，不需要设置preview参数。当preview = true时，传入真实vid即可。

自定义视频播放的开始/结束时间

播放器支持通过参数来指定视频开始/结束播放的时间点。

 代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    //watchStartTime:10, //播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长。
    //watchEndTime:60 //播放结束时间，表示视频播放到第几秒结束，设置该值后，只能在开始时间至结束时间范围内进行进度条的拖拽。
    start:10, //截取视频的一部分作为一个独立的视频，如原视频时长60秒，设定start=20后，则视频显示为40秒，并且从原视频的第20秒开始播放。
    end:50,//截取视频的一部分作为一个独立的视频，如原视频时长60秒，设定start=20,end=50后，则视频显示为30秒，并且从原视频的第20秒开始播放，到原视频的50秒结束播放。
});
</script>

续播

播放器默认会记录视频上次观看到的时间点，在同一浏览器中再次打开播放页面，可从上次观看的时间点继续播放。

 代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为’on‘时会禁用续播功能。
});
</script>

播放器只会在视频播放10秒后至视频结束10秒前的时间段内正常记录续播点。播放不足10秒不续播，播放到了最后10秒但未播完，续播点在结束前10秒，播完后不续播。

自定义播放器外观和控件

播放器的皮肤外观以及控件按钮可通过管理后台的播放器设置或者参数进行自定义设置。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
  wrap: '#video',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  skinLocation:1, // 播放器控制栏显示位置：0 不显示，1 视频区域内，2 视频区域外。仅在PC端生效。
  hideSwitchPlayer:true, // 是否隐藏H5和Flash播放器的切换按钮。
  lang:en, // 播放器语言，可选 zh_CN （中文）、 en （英文）
  ban_skin_progress:true, // 是否隐藏视频播放进度条
  showHd: false, // 是否显示清晰度切换的按钮，默认为 true
  speed: false, // 是否显示倍速切换的按钮
  allowFullscreen: false, // 是否允许全屏播放。为false时会隐藏全屏按钮（全屏的API依然可用）。
  screenshot:true, // 是否显示视频截图按钮。仅在PC端生效。
  hideRepeat: true, // 是否隐藏播放结束后的重播按钮。
  fullscreenProxy:true, // 全屏代理，设置后点击全屏按钮或者双击播放器不会调用全屏api，会触发 window.onFullscreenProxy(vid, toFullscreen) 事件，调用者自行做全屏处理，适合在全屏状态下叠加用户自定义的元素。
  full_page_screen:true, // 是否显示网页全屏按钮。需绑定onFullPageScreen事件做对应的处理。
  pictureInPicture:true, // 是否在控制栏显示画中画按钮。仅在PC H5播放器生效，仅在播放非加密视频时生效。
});

player.toggleFullscreen(); // 全屏/退出全屏 切换
player.on('s2j_onFullScreen', () => {
    console.info('播放器进入全屏');
});
player.on('s2j_onNormalScreen', () => {
    console.info('播放器退出全屏');
});
window.onFullscreenProxy = function (vid, toFullscreen) {
  console.log('全屏事件触发:',toFullscreen);
  // 这里添加自定义全屏处理逻辑
}
window.onFullPageScreen = function(v, currentStatus) {
    console.log('页面全屏事件触发：',currentStatus);
    // 这里添加与移除页面全屏相关样式，需调用者添加
    player.toggleFullPageScreen();// 更新播放器页面全屏按钮状态
}
</script>

禁止拖拽进度

在部分教育和培训场景下，希望能够强制学员看完视频，不允许拖拽进度。可通过播放器参数进行控制：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    ban_skin_progress: true, // 是否隐藏播放器控制栏的进度条
    ban_seek:'on',//是否禁止拖拽进度条
    ban_seek_by_limit_time:'on', //是否禁止拖拽进度至视频未播放到的位置，为on时只可在已播放过的进度范围内拖拽（向前拖拽）
});
</script>

Android系统下各厂商浏览器表现不一致，ban_seek参数可能不生效。

自定义视频封面图

上传至云点播平台的视频会在编码时进行截图，默认会采用第一张截图作为视频封面图。用户可以在点播管理后台重新选择或上传封面图，也可以通过播放器参数进行自定义设置。 

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    loading_bg_img: 'https://img.videocc.net/uimage/8/88083abbf5/first_image/2bb92156-e3ac-4781-bdba-483c3213ccd2_b.png', // 封面图URL
    cover_display:'scaleAspectFit', //封面图显示方式
    cover_opacity:70 //封面图蒙层不透明度，取值范围：[0,100]。
});
</script>

 MR虚拟直播

• MR直播实例(混合现实直播)高品质企业直播
• 企业年会直播来个虚拟舞台场景如何？
• MR直播(混合现实直播)做一场高品质企业培训
• MR场景直播-帮助企业高效开展更有意思的员工培训
• 企业多会场视频直播（主会场、分会场直播）实例效果
• 虚拟直播（虚拟场景直播）要怎么做？

无延迟直播

• 无延时直播/超低延时直播画面同步性测试（实测组图）
• 搞定企业视频直播：硬件设备、直播网络环境和设备连接说明
• 无延时/无延迟视频直播实例效果案例
• OBS无延迟视频直播完整教程（组图）
• 毫秒级超低延时直播产品实测（PRTC直播/webRTC直播）

视频加密与安全

• 企业培训视频如何防止被下载和盗用？
• 在线教育机构视频加密防下载和防盗用的方法有哪些可以借鉴
• 上新：视频加密功能增加防录屏(随机水印)功能
• 两种实现视频倍速播放的方法（视频播放器倍速1.5x/2x）
• 教育培训机构教学课程内容视频加密是如何做的？

在线导播台

• 在线导播台（网页导播台）混流效果
• OBS Studio导播台多画面使用实测
• 软件导播台多画面切换支持多人连麦实测（实测组图）