Very cool! !
This article will explain the functions related to video playback (based on cloud platform), including initializing the player, setting player size, video switching, double speed switching, video preview, customizing the start/end time of video playback, prohibiting drag and drop progress, Player skin, control buttons, playback controls, etc.
Picture / html5 video player calling effect (double speed switching)
Picture / html5 video player calling effect (ultra-clear/high-definition/smooth image quality switching)
Initialize the 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', () => { //Subscribe to the video start playback event
console.info('Video starts playing');
player.j2s_seekVideo(60); //Seek the video to the 60th second
});
</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%', //The player width supports two types: pixel value and percentage. The default value is '100%'
height: '60%', // The height of the player, supports two types: pixel value and percentage, the default value is '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: '', //The playsafe parameter needs to be passed when playing encrypted video on PC
//sign: '',// To play encrypted video on mobile H5, you need to pass sign and ts parameters.
//ts: '',
//watchStartTime: 100, // Start playing from the 100th second
//skipTeaser: false, //Whether to skip the title after switching videos and play the main video directly
//ban_seek: 'off', // Whether to disable dragging progress. If the value is 'on', dragging progress will be disabled.
//ban_seek_by_limit_time: 'off', // Whether to prohibit dragging progress to a position where the video has not been played. When it is 'on', dragging can only be done within the progress range that has been played (drag forward).
viewerInfo: { //Set the viewer information when switching videos, optional
viewerId: '1555313336634', // Viewer ID
viewerName: 'polyv', // viewer nickname
viewerAvatar: 'https://my.domain.com/user/avatar.png', // Viewer avatar URL
viewerExtraInfo1:'', // Custom extra information field 1
viewerExtraInfo2:'', // Customized additional information field 2
viewerExtraInfo3:'' // Custom extra information field 3
}
};
player.on('s2j_onPlayOver', () => {
console.info('Video playback completed');
player.changeVid(option); // Switch to the next video
});
Definition switching
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 definition 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, // Whether the player control bar displays a button for switching clarity, the default is true
show_rate:2, // The highest resolution allowed to be selected, value: {1,2}. When the value is 1, only smoothness is displayed; when the value is 2, smoothness and high-definition are optional. When not set, full resolution is displayed.
df:1 //The default definition used for video playback, values: {0,1,2,3}, corresponding to automatic, smooth, high-definition, and ultra-clear respectively.
});
const hd = 3;
player.switchBitrate(hd);//Switch to ultra-high definition.
</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, //When the parameter value is of boolean type, it indicates whether to display the double-speed switching button.
speed: [0.5, 1, 1.25, 1.5, 2] //When the parameter value is an array, it indicates the optional rate of double-speed switching. Up to 6 rates can be set, and the value range is: (0,3). The default value on PC is: [2, 1.5, 1.2, 0.5], and the default value on mobile is: [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' // Whether to display the line switching button
});
</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 // Whether to use preview mode, the playback will stop after the preview duration is reached
});
</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, //The playback start time indicates the second from which the video will start playing. The parameter value must be less than the video duration.
//watchEndTime:60 //The playback end time indicates the number of seconds until the video ends. After setting this value, the progress bar can only be dragged within the range from the start time to the end time.
start:10, //Intercept a part of the video as an independent video. For example, if the original video is 60 seconds long and set start=20, the video will be displayed for 40 seconds and will start playing from the 20th second of the original video.
end:50,//Intercept a part of the video as an independent video. For example, the original video is 60 seconds long. After setting start=20, end=50, the video will be displayed for 30 seconds and start from the 20th second of the original video. Play and end playback after 50 seconds of the original video.
});
</script>
Resume
By default, the player will record the last time the video was viewed, and you can continue playing from the last time you opened the play page in the same browser.
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, //The replay function will be enabled only for videos with a default duration of more than 5 minutes. This parameter can be modified, unit: minutes.
ban_history_time: 'off' //When the value is 'on', the replay function will be disabled.
});
</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, and 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, // Display position of player control bar: 0 is not displayed, 1 is inside the video area, 2 is outside the video area. Only takes effect on PC.
hideSwitchPlayer:true, // Whether to hide the switch button of H5 and Flash players.
lang:en, // Player language, optional zh_CN (Chinese), en (English)
ban_skin_progress:true, // Whether to hide the video playback progress bar
showHd: false, // Whether to display the clarity switching button, the default is true
speed: false, // Whether to display the double speed switching button
allowFullscreen: false, // Whether to allow full screen playback. When false, the full screen button will be hidden (the full screen API is still available).
screenshot:true, // Whether to display the video screenshot button. Only takes effect on PC.
hideRepeat: true, // Whether to hide the replay button after the playback ends.
fullscreenProxy:true, // Fullscreen proxy. After setting, clicking the fullscreen button or double-clicking the player will not call the fullscreen api, but will trigger the window.onFullscreenProxy(vid, toFullscreen) event. The caller will do the fullscreen processing by itself, which is suitable for superimposing users in the fullscreen state. Custom elements.
full_page_screen:true, // Whether to display the web page full screen button. The onFullPageScreen event needs to be bound for corresponding processing.
pictureInPicture:true, // Whether to display the picture-in-picture button in the control bar. It only takes effect in the PC H5 player, and only takes effect when playing unencrypted videos.
});
player.toggleFullscreen(); // Full screen/exit full screen switch
player.on('s2j_onFullScreen', () => {
console.info('The player enters full screen');
});
player.on('s2j_onNormalScreen', () => {
console.info('The player exits full screen');
});
window.onFullscreenProxy = function (vid, toFullscreen) {
console.log('Fullscreen event triggered:',toFullscreen);
//Add custom full-screen processing logic here
}
window.onFullPageScreen = function(v, currentStatus) {
console.log('Page full screen event triggered:',currentStatus);
// Add and remove page full-screen related styles here, which need to be added by the caller
player.toggleFullPageScreen();//Update the full screen button status of the player page
}
</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, // Whether to hide the progress bar of the player control bar
ban_seek:'on',//Whether to prohibit dragging the progress bar
ban_seek_by_limit_time:'on', //Whether to prohibit dragging progress to a position where the video has not been played. When it is on, dragging can only be done within the progress range that has been played (drag forward)
});
</script>
The performance of browsers from various manufacturers under the Android system is inconsistent, and the ban_seek parameter may not take effect.
Customized 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', // Cover image URL
cover_display:'scaleAspectFit', //Cover image display method
cover_opacity:70 //Cover image mask layer opacity, value range: [0,100].
});
</script>
Support encryption, the effect is as follows:
▲ Screenshot of the effect
My popular article recommendations
- Effect test of online cloud director switching for multi-channel live video broadcast
- How to convert a video into a QR code and scan the code to play it directly?
- Which websites upload videos without inserting ads?
- How to generate QR code from video? Can I watch it by scanning the QR code on WeChat? No advertising
- Commonly used photo size comparison table, just look at this table for the correct photo size.
- Video live streaming strategy (organized streaming interfaces for major platforms)
- HTML5 video double speed playback function
- Let me teach you a trick: How to implement list playback of multiple videos?
- How to implement the function of playing videos in the video list on WeChat public account
- h5 video double-speed playback function (an example of video multi-speed viewing function)
- How to configure FTP server
- How to upload files using FTP (FTP File Transfer)
- OBS Live Broadcast Tool User Guide/OBS Tool for Pushing Live Video Sources to the Server
- QQ browser hijacks the video tag to load its own ads (how to solve it?)