<div class="video-player-content">
	<div class="app-card-title mb-4">
		<anglo-title-component title="Video Player"></anglo-title-component>
	</div>
	<div class="card-content-wrapper">
		<div class="app-card mb-4">
			<mat-card>
				<div class="card-title">
					<h3>{{'Base config'|translate}}</h3>
				</div>	
			</mat-card>
			<div class="card-content">
				<vg-player>
				   <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
				      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
				   </video>
				</vg-player>
			</div>
		</div>
	</div>	
	<div class="card-content-wrapper">
		<div class="app-card mb-4">
			<mat-card>
				<div class="card-title">
					<h3>{{'Audio Track And Plays Inline'|translate}}</h3>
				</div>	
			</mat-card>
			<div class="card-content">
				<vg-player>
				   <vg-overlay-play></vg-overlay-play>
				   <vg-buffering></vg-buffering>
				   	<vg-scrub-bar [vgSlider]="true">
				      <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
				      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
				   </vg-scrub-bar>
				   <vg-controls >
				      <vg-play-pause></vg-play-pause>
				      <vg-playback-button></vg-playback-button>

				      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

				      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

				      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
				      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

				      <vg-track-selector></vg-track-selector>
				      <vg-mute></vg-mute>
				      <vg-volume></vg-volume>

				      <vg-fullscreen></vg-fullscreen>

				   </vg-controls>

				   <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin >
				      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
				      <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
				      <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">

				      <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default>
				      <track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es">
				   </video>
				</vg-player>	
			</div>
		</div>
	</div>
</div>	

