videogular2
Version:
Videogular is a video application framework for desktop and mobile powered by Angular 2.0
888 lines (405 loc) • 29.2 kB
HTML
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>VgMedia · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<link rel="stylesheet" href="../../../gitbook/style.css">
<link rel="stylesheet" href="../../../gitbook/gitbook-plugin-responsive-iframes/plugin.css">
<link rel="stylesheet" href="../../../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../../../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../../../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../../../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../services/vg-api/" />
<link rel="prev" href="../vg-player/" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="header">Introduction</li>
<li class="chapter " data-level="1.1" data-path="../../../">
<a href="../../../">
What's Videogular?
</a>
</li>
<li class="header">Getting Started</li>
<li class="chapter " data-level="2.1" data-path="../../../getting-started/">
<a href="../../../getting-started/">
Getting Started
</a>
</li>
<li class="chapter " data-level="2.2" data-path="../../../getting-started/how-videogular-works.html">
<a href="../../../getting-started/how-videogular-works.html">
How Videogular works
</a>
</li>
<li class="chapter " data-level="2.3" data-path="../../../getting-started/master-media.html">
<a href="../../../getting-started/master-media.html">
Master Media
</a>
</li>
<li class="chapter " data-level="2.4" data-path="../../../getting-started/using-the-api.html">
<a href="../../../getting-started/using-the-api.html">
Using the API
</a>
</li>
<li class="header">Modules</li>
<li class="chapter " data-level="3.1" data-path="../">
<a href="../">
videogular2/core
</a>
<ul class="articles">
<li class="chapter " data-level="3.1.1" data-path="../vg-player/">
<a href="../vg-player/">
VgPlayer
</a>
</li>
<li class="chapter active" data-level="3.1.2" data-path="./">
<a href="./">
VgMedia
</a>
</li>
<li class="chapter " data-level="3.1.3" data-path="../services/vg-api/">
<a href="../services/vg-api/">
VgAPI
</a>
</li>
<li class="chapter " data-level="3.1.4" data-path="../services/vg-fullscreen-api/">
<a href="../services/vg-fullscreen-api/">
VgFullscreenAPI
</a>
</li>
<li class="chapter " data-level="3.1.5" data-path="../services/vg-utils/">
<a href="../services/vg-utils/">
VgUtils
</a>
</li>
<li class="chapter " data-level="3.1.6" data-path="../services/vg-controls-hidden/">
<a href="../services/vg-controls-hidden/">
VgControlsHidden
</a>
</li>
<li class="chapter " data-level="3.1.7" data-path="../vg-cue-points/">
<a href="../vg-cue-points/">
VgCuePoints
</a>
</li>
<li class="chapter " data-level="3.1.8" data-path="../events/">
<a href="../events/">
VgEvents
</a>
</li>
<li class="chapter " data-level="3.1.9" data-path="../states/">
<a href="../states/">
VgStates
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.2" data-path="../../buffering/">
<a href="../../buffering/">
videogular2/buffering
</a>
<ul class="articles">
<li class="chapter " data-level="3.2.1" data-path="../../buffering/vg-buffering/">
<a href="../../buffering/vg-buffering/">
VgBuffering
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.3" data-path="../../controls/">
<a href="../../controls/">
videogular2/controls
</a>
<ul class="articles">
<li class="chapter " data-level="3.3.1" data-path="../../controls/vg-controls/">
<a href="../../controls/vg-controls/">
VgControls
</a>
</li>
<li class="chapter " data-level="3.3.2" data-path="../../controls/vg-play-pause/">
<a href="../../controls/vg-play-pause/">
VgPlayPause
</a>
</li>
<li class="chapter " data-level="3.3.3" data-path="../../controls/vg-playback/">
<a href="../../controls/vg-playback/">
VgPlaybackButton
</a>
</li>
<li class="chapter " data-level="3.3.4" data-path="../../controls/vg-scrub-bar/">
<a href="../../controls/vg-scrub-bar/">
VgScrubBar
</a>
<ul class="articles">
<li class="chapter " data-level="3.3.4.1" data-path="../../controls/vg-scrub-bar/vg-scrub-bar-current-time/">
<a href="../../controls/vg-scrub-bar/vg-scrub-bar-current-time/">
VgScrubBarCurrentTime
</a>
</li>
<li class="chapter " data-level="3.3.4.2" data-path="../../controls/vg-scrub-bar/vg-scrub-bar-buffering-time/">
<a href="../../controls/vg-scrub-bar/vg-scrub-bar-buffering-time/">
VgScrubBarBufferingTime
</a>
</li>
<li class="chapter " data-level="3.3.4.3" data-path="../../controls/vg-scrub-bar/vg-scrub-bar-cue-points/">
<a href="../../controls/vg-scrub-bar/vg-scrub-bar-cue-points/">
VgScrubBarCuePoints
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.3.5" data-path="../../controls/vg-time-display/">
<a href="../../controls/vg-time-display/">
VgTimeDisplay
</a>
<ul class="articles">
<li class="chapter " data-level="3.3.5.1" data-path="../../controls/vg-time-display/vg-utc.html">
<a href="../../controls/vg-time-display/vg-utc.html">
VgUtcPipe
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.3.6" data-path="../../controls/vg-track-selector/">
<a href="../../controls/vg-track-selector/">
VgTrackSelector
</a>
</li>
<li class="chapter " data-level="3.3.7" data-path="../../controls/vg-mute/">
<a href="../../controls/vg-mute/">
VgMute
</a>
</li>
<li class="chapter " data-level="3.3.8" data-path="../../controls/vg-volume/">
<a href="../../controls/vg-volume/">
VgVolume
</a>
</li>
<li class="chapter " data-level="3.3.9" data-path="../../controls/vg-fullscreen/">
<a href="../../controls/vg-fullscreen/">
VgFullscreen
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.4" data-path="../../ima-ads/">
<a href="../../ima-ads/">
videogular2/ima-ads
</a>
<ul class="articles">
<li class="chapter " data-level="3.4.1" data-path="../../ima-ads/vg-ima-ads/">
<a href="../../ima-ads/vg-ima-ads/">
VgImaAds
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.5" data-path="../../overlay-play/">
<a href="../../overlay-play/">
videogular2/overlay-play
</a>
<ul class="articles">
<li class="chapter " data-level="3.5.1" data-path="../../overlay-play/vg-overlay-play/">
<a href="../../overlay-play/vg-overlay-play/">
VgOverlayPlay
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="3.6" data-path="../../streaming/">
<a href="../../streaming/">
videogular2/streaming
</a>
<ul class="articles">
<li class="chapter " data-level="3.6.1" data-path="../../streaming/vg-dash/">
<a href="../../streaming/vg-dash/">
VgDASH
</a>
</li>
<li class="chapter " data-level="3.6.2" data-path="../../streaming/vg-hls/">
<a href="../../streaming/vg-hls/">
VgHLS
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="../../.." >VgMedia</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="vgmedia-directive">VgMedia @Directive</h1>
<p>The <code>VgMedia</code> directive exposes through the <code>VgAPI</code> all the events and properties of the element reference passed via the <code>@Input</code> property <code>vgMedia</code>.</p>
<p>To create the <code>VgAPI</code>, Videogular needs that each <code>VgMedia</code> directive has an <code>id</code> to build an internal map with all media objects.</p>
<h2 id="inputs">Inputs</h2>
<table>
<thead>
<tr>
<th>Input</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>vgMedia</td>
<td>Element reference to a <code>video</code> tag, <code>audio</code> tag or a @Component that implements <code>IPlayable</code></td>
</tr>
<tr>
<td>vgMaster</td>
<td>Boolean to define if this <code>vgMedia</code> is the master media registered on the <code>VgAPI</code></td>
</tr>
</tbody>
</table>
<h2 id="methods">Methods</h2>
<h3 id="playvoid">play():void</h3>
<p>Call to the <code>play</code> method of the element reference passed via the <code>@Input</code> property <code>vgMedia</code>. This usually is a <code>video</code> or <code>audio</code> element.</p>
<h3 id="pausevoid">pause():void</h3>
<p>Call to the <code>pause</code> method of the element reference passed via the <code>@Input</code> property <code>vgMedia</code>. This usually is a <code>video</code> or <code>audio</code> element.</p>
<h3 id="seektimevaluenumber-bypercentboolean--falsevoid">seekTime(value:number, byPercent:boolean = false):void</h3>
<p>Seek to an specified <code>value</code> by second or percentage defined by <code>byPercent</code> property.</p>
<h3 id="addtexttracktypesubtitles--caption--descriptions--chapters--metadata-labelstring-languagestring-modedisabled--hidden--showing">addTextTrack(type:'subtitles' | 'caption' | 'descriptions' | 'chapters' | 'metadata', label?:string, language?:string, mode?:'disabled' | 'hidden' | 'showing')</h3>
<p>Create a <code>TextTrack</code> dynamically. You can add <code>VTTCue</code> objects using the <code>addCue</code> method available in the <code>TextTrack</code> class.</p>
<h2 id="properties">Properties</h2>
<h3 id="id-read-only-string">id [read-only] :string</h3>
<p>Returns the <code>id</code> of the element.</p>
<h3 id="duration-read-only-number">duration [read-only] :number</h3>
<p>Returns the <code>duration</code> in seconds.</p>
<h3 id="currenttime-read-write-number">currentTime [read-write] :number</h3>
<p>Returns the <code>currentTime</code> in seconds.</p>
<h3 id="volume-read-write-number">volume [read-write] :number</h3>
<p>Returns the <code>volume</code> value (between 0 and 1).</p>
<h3 id="playbackrate-read-write-number">playbackRate [read-write] :number</h3>
<p>Returns the <code>playbackRate</code>. Where <code>1</code> is normal speed and <code>2</code> is double speed.</p>
<h3 id="buffered-read-only-timeranges">buffered [read-only] :TimeRanges</h3>
<p>Returns a <a href="https://developer.mozilla.org/en/docs/Web/API/TimeRanges" target="_blank"><code>TimeRanges</code></a> object as defined by the HTML5 API.</p>
<h3 id="time-read-only--current-0-total-0-left-0-">time [read-only] :{ current: 0, total: 0, left: 0 };</h3>
<p>Returns an object with <code>current</code>, <code>total</code> and <code>left</code> properties in milliseconds of the element.</p>
<h3 id="subscriptions-read-only-imediasubscriptions">subscriptions [read-only] :IMediaSubscriptions;</h3>
<p>Returns an <code>IMediaSubscriptions</code> object of event subscriptions to subscribe to several <code>Observables</code>.</p>
<ul>
<li><strong>abort</strong>: Fired when the loading of the media has been aborted.</li>
<li><strong>canPlay</strong>: Fired when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the <code>HAVE_ENOUGH_DATA</code> readyState.</li>
<li><strong>canPlayThrough</strong>: Fired when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. It will also be fired when playback is toggled between paused and playing. Note: Manually setting the <code>currentTime</code> will eventually fire a <code>canplaythrough</code> event in firefox. Other browsers might not fire this event.</li>
<li><strong>durationChange</strong>: Fired when the duration of the media has changed.</li>
<li><strong>emptied</strong>: Fired when the current playlist has been emptied.</li>
<li><strong>encrypted</strong>: Fired when the current media must be decrypted by the Encrypted Media Extensions API.</li>
<li><strong>ended</strong>: Fired when playback completes.</li>
<li><strong>error</strong>: Fired when an error occurs. The element's error attribute contains more information.</li>
<li><strong>loadedData</strong>: Fired when the current frame of the media has been loaded.</li>
<li><strong>loadedMetadata</strong>: Fired when the media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</li>
<li><strong>loadedStart</strong>: Fired when the browser starts loading the media.</li>
<li><strong>pause</strong>: Fired when playback is paused.</li>
<li><strong>play</strong>: Fired when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.</li>
<li><strong>playing</strong>: Fired when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).</li>
<li><strong>progress</strong>: Fired periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's <code>buffered</code> attribute.</li>
<li><strong>rateChange</strong>: Fired when the playback rate of the media has been changed.</li>
<li><strong>seeked</strong>: Fired when a seek operation completes.</li>
<li><strong>seeking</strong>: Fired when a seek operation begins.</li>
<li><strong>stalled</strong>: Fired when the browser is trying to get media data but the data is not available.</li>
<li><strong>suspend</strong>: Fired when the browser is intentionally not getting media data.</li>
<li><strong>timeUpdate</strong>: Fired when the time indicated by the element's <code>currentTime</code> attribute has changed.</li>
<li><strong>volumeChange</strong>: Fired when the audio volume changes (both when the volume is set and when the muted attribute is changed).</li>
<li><strong>waiting</strong>: Fired when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</li>
<li><strong>startAds</strong>: Fired when an advertisement started. This event will only be triggered if you have the Videogular Google IMA in your media player.</li>
<li><strong>endAds</strong>: Fired when an advertisement completes. This event will only be triggered if you have the Videogular Google IMA in your media player.</li>
</ul>
<h3 id="canplay-read-only-boolean">canPlay [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the element can start playing.</p>
<h3 id="canplaythrough-read-only-boolean">canPlayThrough [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the element can start playing without buffering.</p>
<h3 id="isbufferdetected-read-only-boolean">isBufferDetected [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if buffer has been detected.</p>
<h3 id="ismetadataloaded-read-only-boolean">isMetadataLoaded [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the metadata has been loaded.</p>
<h3 id="iswaiting-read-only-boolean">isWaiting [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the element is waiting for buffer.</p>
<h3 id="iscompleted-read-only-boolean">isCompleted [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the element has been completed.</p>
<h3 id="islive-read-only-boolean">isLive [read-only] :boolean;</h3>
<p>Returns a <code>boolean</code> value to know if the element is a live streaming</p>
<h3 id="texttracks-read-only-texttrack">textTracks [read-only] :TextTrack[]</h3>
<p>Returns an array of <code>TextTrack</code> objects. Use this array to get your track to add and remove <code>VTTCue</code> objects dynamically.</p>
<h2 id="html-definition">HTML Definition</h2>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">vg-player</span>></span>
<span class="hljs-tag"><<span class="hljs-name">video</span> #<span class="hljs-attr">myMedia</span>
[<span class="hljs-attr">vgMedia</span>]=<span class="hljs-string">"myMedia"</span>
[<span class="hljs-attr">vgMaster</span>]=<span class="hljs-string">"true"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-video"</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">"http://static.videogular.com/assets/videos/videogular.mp4"</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">"video/mp4"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">video</span>></span>
<span class="hljs-tag"></<span class="hljs-name">vg-player</span>></span>
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="../vg-player/" class="navigation navigation-prev " aria-label="Previous page: VgPlayer">
<i class="fa fa-angle-left"></i>
</a>
<a href="../services/vg-api/" class="navigation navigation-next " aria-label="Next page: VgAPI">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"VgMedia","level":"3.1.2","depth":2,"next":{"title":"VgAPI","level":"3.1.3","depth":2,"path":"modules/core/services/vg-api/README.md","ref":"modules/core/services/vg-api/README.md","articles":[]},"previous":{"title":"VgPlayer","level":"3.1.1","depth":2,"path":"modules/core/vg-player/README.md","ref":"modules/core/vg-player/README.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["ga","responsive-iframes"],"pluginsConfig":{"ga":{"configuration":"auto","token":"UA-45418240-1"},"responsive-iframes":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"modules/core/vg-media/README.md","mtime":"2017-06-22T07:43:44.601Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-06-22T07:45:27.174Z"},"basePath":"../../..","book":{"language":""}});
});
</script>
</div>
<script src="../../../gitbook/gitbook.js"></script>
<script src="../../../gitbook/theme.js"></script>
<script src="../../../gitbook/gitbook-plugin-ga/plugin.js"></script>
<script src="../../../gitbook/gitbook-plugin-responsive-iframes/plugin.js"></script>
<script src="../../../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../../../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>