Getting Started

Installation

After reading the installation section, you should know various installation methods. Now, let's assume we are using ES module import.

npm

$ npm install qier-player

pnpm

$ pnpm install qier-player

yarn

$ yarn add qier-player

Getting Started

import Player from 'qier-player'

const player = new Player({
  src: 'https://vortesnail.github.io/qier-player/test-video_1080p.mp4',
})

player.mount(document.body)

First, we import Player, create an instance, then pass in the video URL, and call the mount method to attach it to the body element.

The mount method attaches the actual DOM elements generated by the player to the specified DOM element. It accepts a parameter, which can be a string (selector) or an actual DOM element. When it is a string, the internal implementation finds the actual DOM element using document.querySelector.

Accessing Related DOM Elements

After calling the mount method, you can access internal members through the instance. The following are commonly accessed:

• Mounted element: Accessible via container.
• Player root element: Accessible via el.
• video: Accessible via video.

import Player from 'qier-player'

const player = new Player({
  src: 'https://vortesnail.github.io/qier-player/test-video_1080p.mp4',
})

player.mount(document.body)

console.log(player.container) // document.body
console.log(player.el)
console.log(player.video)

Instance Properties and Methods

After creating the instance player, there are many member properties that we can read.

For example, the following code achieves autoplay and then pauses after 10 seconds.

player.muted = true // Mute
player.play() // Play

setTimeout(() => {
  player.pause() // Pause
}, 10000)

If we print the player instance in the console, you will find many member properties when expanded. For more details, please click on Properties and Methods.

Event Listening

The player has 5 methods related to events.

Method	Description
emit(evt: string, ...args: any[])	Dispatch event
on(evt: string, fn?: Function)	Listen for event
once(evt: string, fn?: Function)	Listen for event, callback function is called only once
off(evt: string, fn?: Function)	Unregister event listener
removeAllListeners(evt?: string)	Unregister all event listeners

You can use these methods to listen to built-in events.

import Player, { EVENT } form 'qier-player'

const player = new Player()

player.on(EVENT.PLAY, () => {
  console.log('Playback started')
})

EVENT.PLAY is essentially a string, using camel case naming as Play.

You can also define custom event listeners.

import Player, { EVENT } form 'qier-player'

const player = new Player()

// Dispatch event
player.emit('CustomEvent')
// Listen for event and execute callback function
player.on('CustomEvent', () => {
  console.log('Custom event triggered')
})

For more built-in events, please see Events.

Destruction

The player and all components implement the Dispose interface, meaning they have a dispose method. Calling this method will destroy the object and its DOM elements.

player.mount(document.body)
// Destroy player and its DOM elements after 5 seconds
setTimeout(() => player.dispose(), 5000)

Multilevel

This player consists of 6 different functional levels, each with its own z-index.

Level	z-index	Description
Video Element	-	Video element has no z-index
Poster Image	10	Video poster
Loading Indicator	20	Loading indicator element displayed when video is loading
Control Bar	30	Bottom control bar for the video
Context Menu	40	Menu that pops up for the video element on right-click
Toast Notification	50	Notification box

Except for the video element, all other functional components use absolute positioning. After providing plugin functionality in the future, developers can decide on appropriate z-index values to avoid unnecessary blocking.

Questions & New Features

If you encounter bugs, want new features, or have usage-related questions, feel free to open an issue.