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="https://metroui.org.ua/res/oceans.mp4"></video>

Poster & logo

You can add poster and logo to video player.

Poster

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"
                           data-src="https://metroui.org.ua/res/oceans.mp4"
                           data-poster="https://metroui.org.ua/res/poster-oceans.jpg">
                    </video>

Logo

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"
                        data-src="https://metroui.org.ua/res/oceans.mp4"
                        data-logo="https://metroui.org.ua/images/logo4.png"
                        data-logo-height="64"
                        data-logo-target="https://metroui.org.ua/v4/"
                    ></video>

Controls

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"
                           data-src="https://metroui.org.ua/res/oceans.mp4"
                           data-show-loop="false"
                           data-show-full="false"
                           data-show-mute="false">
                    </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">"
                        data-src="https://metroui.org.ua/res/oceans.mp4">
                    </video>

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"
                        data-src="https://metroui.org.ua/res/oceans.mp4"
                        data-controls-hide="1000">
                    </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>

Volume

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>

Events

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

Methods

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');
                    player.play("https://metroui.org.ua/res/oceans.mp4");
                    player.pause();
                    player.resume();

Observe

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

Table of contents