Video player

Create cool styled video player in one command with Metro 4 video role.

Create player

It is often necessary to show video files to the user. Use the Metro 4 video player to show video the same in all systems.

To create video player add attribute data-role="video" to video element. To define video source add attribute data-src="...".

                    <video data-role="video" data-src=""></video>

Poster & logo

You can add poster and logo to video player.


The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. To add poster use attribute data-poster="...".

                    <video data-role="video"


To add specific logo to player, use attributes data-logo, data-logo-height, data-logo-width, data-logo-target. If you specify data-logo-target, user can be switched to target address, specified in this attribute. With data-logo-height and data-logo-width you can change default logo size.

                    <video data-role="video"


You can define what controls will be shown and what image contained in it.

Show controls

To define controls shown use attributes: data-show-loop, data-show-play, data-show-stop, data-show-full, data-show-stream, data-show-volume. All this attributes has ben one of two values: true or false.

                    <video data-role="video"

Define controls images

To define controls images use next attributes: data-loop-icon, data-play-icon, data-pause-icon, data-stop-icon, data-mute-icon, data-volume-low-icon, data-volume-medium-icon, data-volume-high-icon, data-screen-more-icon, data-screen-less-icon. Values for these attributes must be valid html tag for icon from font or image.

                    <video data-role="video"
                        data-loop-icon="<span class="mif-loop2"></span>"
                        data-play-icon="<img src="images/play-icon.png">"

Hiding controls

You can use attribute data-controls-hide to auto hiding controls when moude leave player and after ... milliseconds. By default this value is 3000. If you set this to 0 controls never hiding.

Hide after 1000 ms
Never hide

                    <video data-role="video"

Video options

Use additional options to interact with component.

Looping video

You can set looping video with attribute data-loop="true".

                    <video data-role="video" data-loop="true"></video>

Auto play video

To auto-play video, you can use attribute data-autoplay="true".

                    <video data-role="video" data-autoplay="true"></video>


You can setup volume with attribute data-volume. This value must be between 0 and 1.

                    <video data-role="video" data-volume=".5"></video>

Aspect ratio

Setup video player aspect ratio with attribute data-aspect-ratio="hd|sd|cinema".

HD (16:9)
SD (4:3)
CINEMA (21:9)

                    <video data-role="video" data-aspect-ratio="hd"></video>
                    <video data-role="video" data-aspect-ratio="sd"></video>
                    <video data-role="video" data-aspect-ratio="cinema"></video>


When video player works, it generated the numbers of events. You can use callback for this event to behavior with video player.

Event Data-* Desc
onPlay(video, player) data-on-play Fired when video playing started
onPause(video, player) data-on-pause Fired when video paused
onStop(video, player) data-on-stop Fired when video stopped
onEnd(video, player) data-on-end Fired when video ended
onMetadata(video, player) data-on-metadata Fired when player get metadata
onTime(currTime, duration, video, player) data-on-time Fired when player play video
onVideoCreate(video, player) data-on-video-create Fired when player created


You can use video player methods to interact with the component.

  • aspectRatio(ratio) - set aspect ratio
  • play() - play current video
  • play(src) - play video from src
  • pause() - pause playing
  • resume() - resume playing
  • stop() - stop playing
  • volume() - get current volume
  • volume(vol) - set volume
  • loop() - toggle looping video
  • mute() - mute video

                    var player = $(el).data('video');


You can change attributes data-aspect-ratio, data-src and data-volume at runtime.