HTML5 video player code calling example (video switching\double speed switching)

This article will explain the functions related to video playback, including initializing the player, setting player size, video switching, double speed switching, video preview, customizing the start/end time of video playback, disabling drag and drop progress, player skin, and controls buttons and playback controls, etc.

Figure/HTML5 video player calling effect (double speed switching)

Figure/html5 video player calling effect (ultra-clear/high-definition/smooth image quality switching)

Initialize player

Polyv Web player supports both Flash and HTM5 playback modes, and can automatically select the optimal playback mode based on the terminal and browser environment. By default, HTML5 is used first, and browsers that do not support HTML5 playback (such as lower versions of IE browsers) will automatically switch to Flash playback.

Code example:

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

For more setting functions, please refer to: Property and interface description.

You can use player.isSupportHTML5 to detect whether the current browser supports H5 playback. If the current browser (such as IE9, IE10) does not support H5, it will automatically switch to Flash player.

Please try not to modify the player style or the video tag.

Try to avoid initializing the player under CSS3 elements or sub-elements such as animation and transform, because these elements may cause the full-screen style of the player to be disordered. This is a bug in the browser, please understand.

Player size settings

The size of the player can be set through the width and height parameters. Parameters support pixel and percentage type values.

Code example:

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

If the value of the parameter width is not specified, the player width will use the default value: 100%, which is consistent with the width of the parent container.

If the value of the parameter height is not specified, the player height will use the default value: 'auto', which means it will automatically adapt according to the video resolution ratio.

Video switching (continuous playback)

The current player instance can use the changeVid interface to switch the video being played. When there are multiple videos, this processing method can also be used to automatically play the next video after the previous video has finished playing.

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

Sharpness switch

After the video is uploaded to Polyway Cloud On-Demand Platform, it will be transcoded into video files of multiple definitions. For details, see Video Definition and Bit Rate. The selection and switching of clarity can be controlled through parameters and interfaces.

Code example:

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

Double speed switching

The H5 player turns on the double-speed playback function by default. Customizable control via parameters.

Code example:

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

line switching

Polyway Video Cloud has multiple CDN acceleration lines. When a problem occurs on one line, it can be switched to another line.

Code example:

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

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

Video preview

In some scenarios, it is hoped that only a part of the video will be allowed to be viewed by the audience, and the full video will be allowed to be viewed only after payment or registration. This scenario can be achieved by passing in the preview vid or setting parameters to use preview mode. The preview vid can be obtained through the preview code in the management background, and the preview duration can be set in the on-demand management background.

Code example:

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

When passing in the preview vid, there is no need to set the preview parameters. When preview = true, just pass in the real vid.

Customize the start/end time of video playback

The player supports specifying the time point when the video starts/ends playing through parameters.

Code example:

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

Resume

By default, the player will record the time point when the video was last viewed. Open the playback page again in the same browser to resume playback from the last time point viewed.

Code example:

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

The player will only record the resumption point normally from 10 seconds after the video plays to 10 seconds before the end of the video. If the playback is less than 10 seconds, the playback will not be continued. If the playback reaches the last 10 seconds but has not finished, the resume point is 10 seconds before the end. The playback will not be continued after the playback is completed.

Customize player appearance and controls

The skin appearance and control buttons of the player can be customized through the player settings or parameters in the management background.

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

Disable dragging progress

In some education and training scenarios, it is hoped that students can be forced to watch the video without dragging the progress. Can be controlled via player parameters:

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

The performance of browsers from various manufacturers under the Android system is inconsistent, and the ban_seek parameter may not take effect.

Custom video cover image

Videos uploaded to the cloud on-demand platform will be screenshotted during encoding, and the first screenshot will be used as the video cover image by default. Users can reselect or upload the cover image in the on-demand management background, or customize settings through the player parameters.

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

My article recommendations: