html5视频播放器代码调用实例(视频切换\倍速切换)

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

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

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

初始化播放器

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

代码示例：

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

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

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

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

播放器尺寸设置

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

代码示例： 

如果不指定参数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); // 切换下一个视频
});

 

清晰度切换

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

代码示例：

倍速切换

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

代码示例：

 

线路切换

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

代码示例：

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

 

视频预览

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

 代码示例：

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

 

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

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

 代码示例：

续播

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

 代码示例：

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

 

自定义播放器外观和控件

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

禁止拖拽进度

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

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

 

自定义视频封面图

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

  我的文章推荐：

• [视频+图文] 线上研讨会是什么，企业对内对外培训可以用线上研讨会吗？
• [图文] 企业直播对网络带宽有什么要求？
• [图文]OBS如何实现毫秒级超低延时直播
• 直播播放器API（播放器调用方法、参数、接口和事件）