Hkvideo-player is a powerful HTML5 video player

The Demo preview

<<< swipe left and right to see more >>>

Experience the address

Please read the text below to familiarize yourself with the HKVideo-player usage and API documentation.

1. Write it first

• At present, the player only supports PC mp4 playback, more vod, live streaming format is still under development, please look forward to…
• You are also welcome to join us and contribute your code. Our goal is to create an H5 video player with excellent experience and performance. Scan the QR code below to join this great cause.

2. Hkvideo-player

The introduction of

// The ES module is imported
import Player from 'hkvideo-player';
// CDN form is introduced
<script src=".. /browser/index.js" type="text/javascript"></script>
Copy the code

use

const player = new Player({
    id: 'app'.    // diyDuration: 300, // User-defined total duration
    cssFullscreen: true.    fluid: true.// Stream layout
 ignores: ['replay'].// Disable execution of a plug-in  // Danmu, // Barrage options  screenShot: true.// Screen capture -- There are cross-domain restrictions and the URL needs to be a local BLOB address  playbackRate: [0.75.1.1.5.2].// Play at double speed  videopip: true.// Original painting within painting  // pipConfig, // Small window size and position  // enterLogo: 'https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2019-10/1571972106218/c91ded088044.png', / / customized brand logo  url: 'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/c576ae3f-7ecc-42be-b430-569366e61427.mp4' }); Copy the code

3. Common apis

Other apis

• Barrage options

const player = new Player({
.  danmu: {
    comments: [
        {
 duration: 10000. id: '1'. start: 3000. txt: 'Long artillery barrage long artillery barrage long artillery barrage long'. style: { // A custom style for the barrage  color: '#ff9500'. fontSize: '20px'. border: 'solid 1px #ff9500'. borderRadius: '50px'. padding: '5px 11px'. backgroundColor: 'rgba (255, 255, 255, 0.1)'  }  } ]. area: { // Barrage display area  start: 0.// The ratio of the height of the player from the top of the area to the top of the player  end: 0.8 // The ratio of the height of the player from the bottom of the area to the top  },  panel: true.// Barrage Settings panel  mouseControl: true.// Border control  mouseControlPause: true.// Mouse over pause  closeDefaultBtn: false.// Turn off the default switch provided by the player  defaultOff: false // The barrage will not be initialized by default  } }) Copy the code

For more on the danmu API and methods, see Danmu.js

• Small window mode setting

pipConfig: {
  width: 580.  height: 326.25.  // left: 120,
  // top: 80,
 // bottom: 100,  // right: 100,  PrevPos: false // Whether to remember the previous position } Copy the code

4, methods,

player.play() / / play

player.pause() / / pause

player.reload() // Reload the video
 player.destroy() // Player destruction  player.getBufferedRange() // Return the current buffer fragment time range. Start indicates the buffer start time and end indicates the buffer end time  player.getFullscreen(player.root) // The player goes to full screen  player.exitFullscreen(player.root) // The player exits the full screen  player.getCssFullscreen() // The player enters the style full screen  player.exitCssFullscreen() // Player exit style full screen  player.getPIP() // Player get picture-in-Picture, can be customized trigger picture-in-picture function conditions, not limited to use in player controls  player.exitPIP() // Player restore picture in picture, you can customize the conditions that trigger the restore picture in picture function, not limited to the use of player controls  player.start(url) // Add video to DOM. // Add video to DOM  player.replay() // The component that plays the replay calls this method  Player.install('play'.function(){}) // How to install the plug-in  player.emit('resourceReady'[{name: '高清'.url: 'url1'}, {name: 'super clear'.url: 'url2'}]); // Clear read switch Copy the code

5, events,

Event registration/logout

Permanent registration

player.on('Event name'.function(){
  // The event name can be queried above
})
Copy the code

A registered

player.once('Event name'.function() {

})
Copy the code

Event log off

player.off('Event name'.function() {

})
Copy the code

Events trigger

player.emit('Event name');
Copy the code

6. Custom plug-in development

// pluginName.js
import Player from 'hkvideo-player';
let pluginName = function(player){
  // Plugin logic
}
 Player.install('pluginName', pluginName); Copy the code

7. Contact us

+QQ friends: 2969057196

Welcome to mention issues

This article is formatted using MDNICE