Skip to content


Video player

Based on 'hlsjs' and' web components', let the native tag 'r-player' have a unified video control. Do not use the 'new Player(options)' way to mount to the specified 'dom', view return view, logic return logic, see and get, more intuitive.

  1. Drag and drop the progress bar
  2. Volume control
  3. The bitrate is automatically switched based on the current bandwidth
  4. Manual definition switch
  5. Play at double speed
  6. Style custom overlay
  7. 'hls' protocol standard encryption video playback
  8. Based on native development, it can run in all frameworks and unify the cross-framework situation
  9. Unified browser controls

Code demo

  <r-player src="/ran/hls/example.m3u8"></r-player>



Resource address of the video


Set the initial volume. The default is 0.5


Set the initial playback time. By default, the playback starts from the beginning


Set the double speed. The default is 1.0


console.log some info



Listen for any player changes, and the value returned is as follows.

An 'instance of the player' can be obtained through this method.

Live by 'type' to judge different event types, perform different operations

propertyexplains thatis of type
typeIndicates the type of the changed event'string'
dataThe value of the'Object'
currentTimeThe current playback time'number'
durationTotal duration of videos'number'
tagAn example of the player'Element'

Where 'type' type has

canplayYour browser is ready to play the media file, but it probably doesn't have enough data to play it to the end without pausing to buffer the content further.
canplaythroughThe browser estimates that it canplay media until the end without stopping content buffering.
completeOfflineAudioContext The rendering is complete.
durationchangeduration is triggered when the value of the duration property changes.
emptiedMedia content emptied; For example, when the media is already loaded (or partially loaded), this event is sent and the load() method is called to reload it.
endedThe video stops playing because the media has reached the end point.
loadedmetadataThe metadata is loaded.
progressis triggered periodically when the browser loads the resource.
ratechangeThe play rate changes.
seekedThe seek operation is complete.
seekingseek begins.
stalledThe user agent is trying to obtain media data but it has not appeared unexpectedly.
suspendMedia data loading has been suspended.
loadeddataThe first frame in media has been added. media has loaded.
timeupdateThe time specified by the currentTime property changes. currentTime attribute has changed.
volumechangeThe volume changes.
waitingPlaying has stopped due to lack of data.
playPlayback has started.
playingAfter a pause or delay due to lack of data, playback is ready to begin.
pausePlay is paused.
volumeThe volume changes.
fullscreenTriggers a full-screen event

Released under the MIT License.