metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Video player - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-done="console.log(arguments[0])" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Video player</a></li> <li class="toc-entry"><a href="#_video_create">Create player</a></li> <li class="toc-entry"><a href="#_video_poster">Poster & logo</a></li> <li class="toc-entry"> <a href="#_video_controls">Controls</a> <ul> <li class="toc-entry"><a href="#_video_controls_show">Show controls</a></li> <li class="toc-entry"><a href="#_video_controls_images">Controls images</a></li> <li class="toc-entry"><a href="#_video_controls_hiding">Hiding controls</a></li> </ul> </li> <li class="toc-entry"> <a href="#_video_options">Options</a> <ul> <li class="toc-entry"><a href="#_video_loop">Looping video</a></li> <li class="toc-entry"><a href="#_video_autoplay">Auto play</a></li> <li class="toc-entry"><a href="#_video_volume">Set volume</a></li> </ul> </li> <li class="toc-entry"><a href="#_video_aspect_ratio">Aspect ratio</a></li> <li class="toc-entry"><a href="#_video_events">Events</a></li> <li class="toc-entry"><a href="#_video_methods">Methods</a></li> <li class="toc-entry"><a href="#_video_observe">Observe</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Video player</h1> <p class="text-leader"> Create cool styled video player in one command with Metro 4 video role. </p>  <h3 id="_video_create">Create player</h3> <p> 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. </p> <p> To create <code>video player</code> add attribute <code>data-role="video"</code> to <code>video</code> element. To define video source add attribute <code>data-src="..."</code>. </p> <div class="example"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-full-screen-mode="window"></video> </div> <pre><code class="html"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4"></video> </code></pre> <h3 id="_video_poster">Poster & logo</h3> <p> You can add <code>poster</code> and <code>logo</code> to video player. </p> <h4>Poster</h4> <p> The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. To add <code>poster</code> use attribute <code>data-poster="..."</code>. </p> <div class="example"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-poster="https://metroui.org.ua/res/poster-oceans.jpg" ></video> </div> <pre><code class="html"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-poster="https://metroui.org.ua/res/poster-oceans.jpg"> </video> </code></pre> <h4>Logo</h4> <p> To add specific <code>logo</code> to player, use attributes <code>data-logo</code>, <code>data-logo-height</code>, <code>data-logo-width</code>, <code>data-logo-target</code>. If you specify <code>data-logo-target</code>, user can be switched to target address, specified in this attribute. With <code>data-logo-height</code> and <code>data-logo-width</code> you can change default logo <code>size</code>. </p> <div class="example"> <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> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_video_controls">Controls</h3> <p> You can define what controls will be shown and what image contained in it. </p> <h4 id="_video_controls_show">Show controls</h4> <p> To define controls shown use attributes: <code>data-show-loop</code>, <code>data-show-play</code>, <code>data-show-stop</code>, <code>data-show-full</code>, <code>data-show-stream</code>, <code>data-show-volume</code>. All this attributes has ben one of two values: <code>true</code> or <code>false</code>. </p> <div class="example"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-controls-hide="0" data-show-loop="false" data-show-full="false" data-show-mute="false" ></video> </div> <pre><code class="html"> <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> </code></pre> <h4 id="_video_controls_images">Define controls images</h4> <p> To define controls images use next attributes: <code>data-loop-icon</code>, <code>data-play-icon</code>, <code>data-pause-icon</code>, <code>data-stop-icon</code>, <code>data-mute-icon</code>, <code>data-volume-low-icon</code>, <code>data-volume-medium-icon</code>, <code>data-volume-high-icon</code>, <code>data-screen-more-icon</code>, <code>data-screen-less-icon</code>. Values for these attributes must be valid html tag for icon from font or image. </p> <div class="example"> <video data-role="video" data-controls-hide="0" data-loop-icon="<span class='mif-loop2 fg-orange'></span>" data-mute-icon="<span class='mif-volume-mute2 fg-red'></span>" data-volume-low-icon="<span class='mif-volume-low fg-yellow'></span>" data-volume-medium-icon="<span class='mif-volume-medium fg-green'></span>" data-volume-high-icon="<span class='mif-volume-high fg-red'></span>" data-play-icon="<img src='images/play-icon.png'>" data-stop-icon="<img src='images/player_stop.png'>" data-src="https://metroui.org.ua/res/oceans.mp4"> </video> </div> <pre><code class="html"> <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> </code></pre> <h4 id="_video_controls_hiding">Hiding controls</h4> <p> You can use attribute <code>data-controls-hide</code> to auto hiding controls when moude leave player and after <code>...</code> milliseconds. By default this value is <code>3000</code>. If you set this to <code>0</code> controls never hiding. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h6>Hide after 1000 ms</h6> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-show-stop="false" data-show-volume="false" ></video> </div> <div class="cell-md-6"> <h6>Never hide</h6> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-controls-hide="0" data-show-stop="false" data-show-volume="false" ></video> </div> </div> </div> <pre><code class="html"> <video data-role="video" data-src="https://metroui.org.ua/res/oceans.mp4" data-controls-hide="1000"> </video> </code></pre>  <h3 id="_video_options">Video options</h3> <p> Use additional options to interact with component. </p> <h4 id="_video_loop">Looping video</h4> <p> You can set <code>looping video</code> with attribute <code>data-loop="true"</code>. </p> <pre><code class="html"> <video data-role="video" data-loop="true"></video> </code></pre> <h4 id="_video_autoplay">Auto play video</h4> <p> To <code>auto-play</code> video, you can use attribute <code>data-autoplay="true"</code>. </p> <pre><code class="html"> <video data-role="video" data-autoplay="true"></video> </code></pre> <h4 id="_video_volume">Volume</h4> <p> You can setup <code>volume</code> with attribute <code>data-volume</code>. This value must be between <code>0</code> and <code>1</code>. </p> <pre><code class="html"> <video data-role="video" data-volume=".5"></video> </code></pre> <h3 id="_video_aspect_ratio">Aspect ratio</h3> <p> Setup video player aspect ratio with attribute <code>data-aspect-ratio="hd|sd|cinema"</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <h6>HD (16:9)</h6> <video data-role="video" data-src="https://metroui.org.ua/res/video-16x9.mp4" data-aspect-ratio="hd" data-show-stop="false" data-show-volume="false" data-show-loop="false" data-show-full="false" data-show-info="false" ></video> </div> <div class="cell-md-4"> <h6>SD (4:3)</h6> <video data-role="video" data-src="https://metroui.org.ua/res/video-4x3.mp4" data-aspect-ratio="sd" data-show-stop="false" data-show-volume="false" data-show-loop="false" data-show-full="false" data-show-info="false" ></video> </div> <div class="cell-md-4"> <h6>CINEMA (21:9)</h6> <video data-role="video" data-poster="https://metroui.org.ua/res/poster-oceans.jpg" data-src="https://metroui.org.ua/res/oceans.mp4" data-aspect-ratio="cinema" data-show-stop="false" data-show-volume="false" data-show-loop="false" data-show-full="false" data-show-info="false" ></video> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_video_events">Events</h3> <p> When video player works, it generated the numbers of events. You can use callback for this event to behavior with video player. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onPlay(video, player)</td> <td><code>data-on-play</code></td> <td>Fired when video playing started</td> </tr> <tr> <td>onPause(video, player)</td> <td><code>data-on-pause</code></td> <td>Fired when video paused</td> </tr> <tr> <td>onStop(video, player)</td> <td><code>data-on-stop</code></td> <td>Fired when video stopped</td> </tr> <tr> <td>onEnd(video, player)</td> <td><code>data-on-end</code></td> <td>Fired when video ended</td> </tr> <tr> <td>onMetadata(video, player)</td> <td><code>data-on-metadata</code></td> <td>Fired when player get metadata</td> </tr> <tr> <td>onTime(currTime, duration, video, player)</td> <td><code>data-on-time</code></td> <td>Fired when player play video</td> </tr> <tr> <td>onVideoCreate(video, player)</td> <td><code>data-on-video-create</code></td> <td>Fired when player created</td> </tr> </tbody> </table> <h3 id="_video_methods">Methods</h3> <p> You can use video player methods to interact with the component. </p> <ul> <li><strong>aspectRatio(ratio)</strong> - set aspect ratio</li> <li><strong>play()</strong> - play current video</li> <li><strong>play(src)</strong> - play video from src</li> <li><strong>pause()</strong> - pause playing</li> <li><strong>resume()</strong> - resume playing</li> <li><strong>stop()</strong> - stop playing</li> <li><strong>volume()</strong> - get current volume</li> <li><strong>volume(vol)</strong> - set volume</li> <li><strong>loop()</strong> - toggle looping video</li> <li><strong>mute()</strong> - mute video</li> </ul> <pre><code class="javascript"> var player = $(el).data('video'); player.play("https://metroui.org.ua/res/oceans.mp4"); player.pause(); player.resume(); </code></pre> <h3 id="_video_observe">Observe</h3> <p> You can change attributes <code>data-aspect-ratio</code>, <code>data-src</code> and <code>data-volume</code> at runtime. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>