Skip to content

Video Player

A component that provides customizable HTML5 video playback functionality with controls for volume, playback, fullscreen mode, and custom aspect ratios.

  • Media Player Component
  • Metro Slider Component (for volume and progress controls)
  • Metro Activity Component (for preloader)
<video data-role="video-player" src="video.mp4"></video>
<video data-role="video-player"
data-aspect-ratio="16/9"
data-volume="0.8"
data-autoplay="true"
data-poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
<video data-role="video-player"
data-src='[
{"src": "video.mp4", "type": "video/mp4"},
{"src": "video.webm", "type": "video/webm"}
]'>
</video>
ParameterTypeDefaultDescription
videoDeferredNumber0Defer initialization of component in milliseconds
srcString/ArraynullVideo source URL or array of sources with type
posterString""URL for the video poster image
logoString""URL for logo displayed over the video
logoHeightNumber32Height of the logo in pixels
logoWidthString"auto"Width of the logo (can be “auto” or a number of pixels)
logoTargetString""URL that the logo links to when clicked
volumeNumber0.5Initial volume level (0 to 1)
loopBooleanfalseWhether the video should loop after ending
autoplayBooleanfalseWhether the video should play automatically
fullScreenModeStringMetro.fullScreenMode.DESKTOPFullscreen mode: “desktop” or “window”
aspectRatioStringMetro.aspectRatio.HDAspect ratio: “hd” (16:9), “sd” (4:3), or “cinema” (21:9)
controlsHideNumber3000Time in milliseconds before controls are hidden (0 = never hide)
showLoopBooleantrueWhether to show loop toggle button
showPlayBooleantrueWhether to show play/pause button
showStopBooleantrueWhether to show stop button
showMuteBooleantrueWhether to show mute button
showFullBooleantrueWhether to show fullscreen button
showStreamBooleantrueWhether to show progress slider
showVolumeBooleantrueWhether to show volume slider
showInfoBooleantrueWhether to show time info display
loopIconString"⮔"Icon for loop button
stopIconString"⏹"Icon for stop button
playIconString"▶"Icon for play button
pauseIconString"⏸"Icon for pause button
muteIconString"🔇"Icon for mute button
volumeLowIconString"🔈"Icon for low volume
volumeMediumIconString"🔉"Icon for medium volume
volumeHighIconString"🔊"Icon for high volume
screenMoreIconString"⬜"Icon for entering fullscreen
screenLessIconString"▫️"Icon for exiting fullscreen
  • play([src]) - Plays the video. If src parameter is provided, changes the video source first.
  • pause() - Pauses video playback.
  • resume() - Resumes video playback if paused.
  • stop() - Stops video playback and resets to the beginning.
  • setVolume(v) - Gets or sets the video volume level (0 to 1 or 0 to 100).
  • loop() - Toggles the loop state of the video.
  • mute() - Toggles the muted state of the video.
  • aspectRatio(ratio) - Changes the aspect ratio of the player.
  • destroy() - Destroys the component and returns the original element.
const player = Metro.getPlugin('#my-video', 'video-player');
player.play(); // Play current video
player.play("new-video.mp4"); // Change source and play
EventDescription
onPlayTriggered when video starts playing
onPauseTriggered when video is paused
onStopTriggered when video is stopped
onEndTriggered when video reaches the end
onMetadataTriggered when video metadata is loaded
onTimeTriggered when playback time updates
onVideoPlayerCreateTriggered after video player component creation
VariableDefault (Light)Dark ModeDescription
--player-wrapper-background#000#000Background color for the video wrapper
#my-video-player {
--player-wrapper-background: #1a1a1a;
}
  • .video-player - Main container class for the video player component
  • .video-wrapper - Container for the video element
  • .controls - Container for the playback controls
  • .full-screen - Applied when the player is in fullscreen mode

You can globally configure the video player component using the Metro.videoPlayerSetup method:

Metro.videoPlayerSetup({
aspectRatio: Metro.aspectRatio.SD,
volume: 0.8,
autoplay: true
});

The component provides three aspect ratio constants:

  • Metro.aspectRatio.HD - 16:9 (default)
  • Metro.aspectRatio.SD - 4:3
  • Metro.aspectRatio.CINEMA - 21:9

Two fullscreen mode options are available:

  • Metro.fullScreenMode.DESKTOP - Uses browser fullscreen API (default)
  • Metro.fullScreenMode.WINDOW - Makes the player fill its container

You can provide multiple video sources for different browser support:

<video data-role="video-player">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>

Or via JavaScript:

Metro.getPlugin("#my-video", "video-player").play([
{src: "video.mp4", type: "video/mp4"},
{src: "video.webm", type: "video/webm"}
]);