Polyv Help Center

Help Center

VOD Player JS SDK

Video Playback

Updated: 2023-12-09 15:34:06

This article explains the features related to video playback, including player skin, control buttons, and playback control.

Initializing the Player

The Polyv Web Player supports both Flash and HTML5 playback modes and automatically selects the optimal mode based on the terminal and browser environment. HTML5 is used by default, and it automatically switches to Flash playback in browsers that do not support HTML5 (e.g., older versions of Internet Explorer).

Code example:

<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,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});

player.on('s2j_onPlayStart', () => { //订阅视频开始播放事件
    console.info('视频开始播放');
    player.j2s_seekVideo(60); //视频seek到第60秒
});
</script>
  1. For more configuration options, refer to: Properties and Interface Documentation.
  2. Use player.isSupportHTML5 to check if the current browser supports H5 playback. If the browser (e.g., IE9, IE10) does not support H5, it will automatically switch to the Flash player.
  3. Avoid modifying the player's styles or the <video> tag as much as possible.
  4. Avoid initializing the player inside or as a child of elements with CSS3 properties like animation and transform, as these may cause fullscreen display issues. This is a known browser bug.

Setting Player Dimensions

The player's dimensions can be set using the width and height parameters. These parameters accept pixel or percentage values.

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

If the width parameter is not specified, the player width defaults to 100%, matching the parent container's width.

If the height parameter is not specified, the player height defaults to 'auto', automatically adjusting based on the video's aspect ratio.

Video Switching (Continuous Playback)

The current player instance can switch the playing video using the changeVid interface. This approach can also be used to automatically play the next video when the previous one finishes.

Code example:

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); // 切换下一个视频
});

Resolution Switching

After uploading a video to the Polyv Cloud Video Platform, it is transcoded into multiple resolution files. See Video Resolution and Bitrate for details. Parameters and interfaces can control resolution selection and switching.

Code example:

<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,
  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>

Playback Speed Switching

The H5 player enables speed control by default. It can be customized using parameters.

<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,
  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 Line Switching

Polyv Video Cloud offers multiple CDN acceleration lines. If one line encounters issues, you can switch to another.

<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,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    showLine: 'on' // 是否显示线路切换按钮
});
</script>

Note: Line switching is currently only supported on mobile H5 players.

Video Preview

In some scenarios, you may want to allow viewers to watch only a portion of a video, requiring payment or registration to view the full video. This can be achieved by passing a preview vid or setting the preview parameter. The preview vid can be obtained from the management console's preview code, and the preview duration can be set in the video-on-demand management backend.

<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,
    vid: '88083abbf5bcf1356e05d39666be527a_8',  
    preview:true // 是否使用预览模式，到达预览时长后会停止播放
});
</script>

When passing a preview vid, the preview parameter does not need to be set. When preview = true, pass the actual vid.

Customizing Video Start/End Time

The player supports specifying the start and end playback time points via parameters.

<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,
    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>

Resume Playback

The player records the last watched time point by default. When the playback page is reopened in the same browser, it resumes from the previously watched time point.

<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,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为’on‘时会禁用续播功能。
});
</script>

The player only records the resume point normally when the video has been played for more than 10 seconds and less than 10 seconds before the end. Playback under 10 seconds will not resume. If the video reaches the last 10 seconds but is not finished, the resume point is set 10 seconds before the end. Playback after completion will not resume.

Customizing Player Appearance and Controls

The player's skin and control buttons can be customized via the management console's player settings or parameters.

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/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>

Disabling Seek

In some educational and training scenarios, you may want to force learners to watch the entire video without allowing them to seek. This can be controlled via player parameters:

<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,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
    ban_skin_progress: true, // 是否隐藏播放器控制栏的进度条
    ban_seek:'on',//是否禁止拖拽进度条
    ban_seek_by_limit_time:'on', //是否禁止拖拽进度至视频未播放到的位置，为on时只可在已播放过的进度范围内拖拽（向前拖拽）
});
</script>

On Android systems, browser behavior varies across manufacturers, and the ban_seek parameter may not take effect.

Custom Video Cover Image

Videos uploaded to the Cloud Video Platform are automatically captured during encoding, with the first screenshot used as the cover image by default. Users can reselect or upload a cover image in the management console or customize it via player parameters.

<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,
    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>
联系客服，在线咨询