<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('./app.ts');
</script>
</head>
<body>
<my-video></my-video>
</body>
</html>
/* Styles go here */
import {bootstrap, Component,FORM_DIRECTIVES,NgClass,NgFor,NgIf} from 'angular2/angular2';
@Component({
selector: 'my-video',
template: `
<div >
<video class="vid" style="width:400px" id="mp"
(loadedmetadata)="processMetaData(movieplayer)" #movieplayer
(timeupdate)="updateDisplayTime(movieplayer)"
(mouseenter)= "hideControl(false)" (mouseout)= "hideControl(true)" >
<source src="https://ia902505.us.archive.org/7/items/Birds021/Birds%2002-1.m4v"/></video>
<div [hidden]="hidectrl" style="position:relative;top:-50px;left:5px" (mouseenter)= "hideControl(false)"
(mouseout)= "hideControl(true)" >
<input [hidden]="!movieLoaded" class="slider" type="range"
min="0" style="width:380px" max="{{movieplayer.duration}}" id="myRange" [(ng-model)]="currentTimeRange" (input)="seek($event,movieplayer)">
<div></div>
<button (click)="onPlayPause(movieplayer)"><img style="width:16px;" src={{playpauseimg}}></button>
<button (click)=" onMuteUnmute(movieplayer)"><img
style="width:16px;" src={{volumeMuteImg}}></button>
<button (click)="makeFullScreen(movieplayer)" ><img style="width:16px;" src="./fullscreen.svg"></button>
<input #volumerange class="volslider"
style="width:80px" type="range" min="1" max="10" [(ng-model)]="volume" (input)="seekVolume($event,movieplayer)">
<span style="color:white">{{currTime}} / {{videoDuration}}</span>
</div>
</div>
`,
styles: [`
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=range].slider {
-webkit-appearance: none;
margin-bottom:10px;
width: 100%;
}
}
input[type=range].slider:focus {
outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
width: 100%;
height: 1.6px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3b4d4d;
border-radius: 18.1px;
border: 0px solid #010101;
}
input[type=range].slider::-webkit-slider-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 10px;
border-radius: 0px;
background: rgba(255, 199, 95, 0.93);
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.2px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
background: #4f6767;
}
input[type=range].slider::-moz-range-track {
width: 100%;
height: 1.6px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3b4d4d;
border-radius: 18.1px;
border: 0px solid #010101;
}
input[type=range].slider::-moz-range-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 10px;
border-radius: 0px;
background: rgba(255, 199, 95, 0.93);
cursor: pointer;
}
input[type=range].slider::-ms-track {
width: 100%;
height: 1.6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].slider::-ms-fill-lower {
background: #273333;
border: 0px solid #010101;
border-radius: 36.2px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
background: #3b4d4d;
border: 0px solid #010101;
border-radius: 36.2px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 10px;
border-radius: 0px;
background: rgba(255, 199, 95, 0.93);
cursor: pointer;
height: 1.6px;
}
input[type=range].slider:focus::-ms-fill-lower {
background: #3b4d4d;
}
input[type=range].slider:focus::-ms-fill-upper {
background: #4f6767;
}
input[type=range].volslider {
-webkit-appearance: none;
width: 100%;
margin: 7.2px 0;
}
input[type=range].volslider:focus {
outline: none;
}
input[type=range].volslider::-webkit-slider-runnable-track {
width: 100%;
height: 1.6px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3b4d4d;
border-radius: 18.1px;
border: 0px solid #010101;
}
input[type=range].volslider::-webkit-slider-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 17px;
border-radius: 50px;
background: #ff0000;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.2px;
}
input[type=range].volslider:focus::-webkit-slider-runnable-track {
background: #4f6767;
}
input[type=range].volslider::-moz-range-track {
width: 100%;
height: 1.6px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3b4d4d;
border-radius: 18.1px;
border: 0px solid #010101;
}
input[type=range].volslider::-moz-range-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 17px;
border-radius: 50px;
background: #ff0000;
cursor: pointer;
}
input[type=range].volslider::-ms-track {
width: 100%;
height: 1.6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].volslider::-ms-fill-lower {
background: #273333;
border: 0px solid #010101;
border-radius: 36.2px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].volslider::-ms-fill-upper {
background: #3b4d4d;
border: 0px solid #010101;
border-radius: 36.2px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].volslider::-ms-thumb {
box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
border: 0px solid #ff1e00;
height: 16px;
width: 17px;
border-radius: 50px;
background: #ff0000;
cursor: pointer;
height: 1.6px;
}
input[type=range].volslider:focus::-ms-fill-lower {
background: #3b4d4d;
}
input[type=range].volslider:focus::-ms-fill-upper {
background: #4f6767;
}
`],
directives: [FORM_DIRECTIVES, NgClass, NgFor, NgIf]
})
class AppComponent {
public videoStatus:number = 1;
public playpauseimg = "./play.svg";
public volumeMuteImg="./volume.svg";
public currentTimeRange:number = 0;
public movieLoaded:boolean=false;
public videoDuration="00:00";
public currTime:string = "";
public volume: number = 5;
public hidectrl: boolean =true;
getBrowser() {
if (navigator.userAgent.indexOf("Chrome") != -1) {
return "Webkit";
} else if (navigator.userAgent.indexOf("Opera") != -1) {
return "Opera";
} else if (navigator.userAgent.indexOf("MSIE") != -1) {
return "IE";
} else if (navigator.userAgent.indexOf("Firefox") != -1) {
return "Firefox";
} else if(navigator.userAgent.indexOf("Safari") != -1) {
return "Webkit";
}
else {
return "unknown";
}
}
secondsToMinutesAndSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.round(time % 60);
return "" + minutes + ":" + seconds;
}
makeFullScreen(mp){
if (this.getBrowser()==="Webkit"){
mp.webkitEnterFullScreen();
}
else if (this.getBrowser() === "Firefox"){
mp.mozRequestFullScreen();
}
else{
return "unknown";
}
}
hideControl(show){
this.hidectrl = show;
}
updateDisplayTime(moviePlayer) {
this.currTime = this.secondsToMinutesAndSeconds(moviePlayer.currentTime);
this.currentTimeRange = moviePlayer.currentTime;
}
onMuteUnmute(moviePlayer){
if(moviePlayer.muted){
moviePlayer.muted=false;
this.volumeMuteImg="./volume.svg"
}
else{
moviePlayer.muted=true;
this.volumeMuteImg="./mute.svg"
}
}
seek(evt, moviePlayer) {
moviePlayer.pause();
moviePlayer.currentTime = evt.target.value;
this.currTime = this.secondsToMinutesAndSeconds(moviePlayer.currentTime);
this.currentTimeRange = moviePlayer.currentTime;
moviePlayer.play();
this.playpauseimg = "./pause.svg";
}
seekVolume(event,moviePlayer){
var volumeToBeSet=event.target.value;
moviePlayer.volume=volumeToBeSet/10;
}
processMetaData(moviePlayer){
var self = this;
this.movieLoaded=true;
moviePlayer.volume = 0.5;
this.videoDuration=this.secondsToMinutesAndSeconds(moviePlayer.duration);
}
onPlayPause(moviePlayer) {
if (moviePlayer.paused) {
moviePlayer.play();
this.playpauseimg = "./pause.svg";
}
else {
moviePlayer.pause();
this.playpauseimg = "./play.svg";
}
}
}
bootstrap(AppComponent);
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30.051 30.051" style="enable-background:new 0 0 30.051 30.051;" xml:space="preserve">
<g>
<path d="M19.982,14.438l-6.24-4.536c-0.229-0.166-0.533-0.191-0.784-0.062c-0.253,0.128-0.411,0.388-0.411,0.669v9.069
c0,0.284,0.158,0.543,0.411,0.671c0.107,0.054,0.224,0.081,0.342,0.081c0.154,0,0.31-0.049,0.442-0.146l6.24-4.532
c0.197-0.145,0.312-0.369,0.312-0.607C20.295,14.803,20.177,14.58,19.982,14.438z"/>
<path d="M15.026,0.002C6.726,0.002,0,6.728,0,15.028c0,8.297,6.726,15.021,15.026,15.021c8.298,0,15.025-6.725,15.025-15.021
C30.052,6.728,23.324,0.002,15.026,0.002z M15.026,27.542c-6.912,0-12.516-5.601-12.516-12.514c0-6.91,5.604-12.518,12.516-12.518
c6.911,0,12.514,5.607,12.514,12.518C27.541,21.941,21.937,27.542,15.026,27.542z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 499.233 499.233" style="enable-background:new 0 0 499.233 499.233;" xml:space="preserve">
<g>
<g>
<path d="M249.617,0C111.917,0,0,111.917,0,249.617s111.917,249.617,249.617,249.617s249.617-111.917,249.617-249.617
S387.317,0,249.617,0z M249.617,465.233c-119,0-215.617-96.617-215.617-215.617S130.617,34,249.617,34
s215.617,96.617,215.617,215.617S368.617,465.233,249.617,465.233z"/>
<path d="M192.667,139.117c-9.35,0-17,7.65-17,17v178.5c0,9.35,7.65,17,17,17c9.35,0,17-7.65,17-17v-178.5
C209.667,146.767,202.017,139.117,192.667,139.117z"/>
<path d="M308.833,139.117c-9.35,0-17,7.65-17,17v178.5c0,9.35,7.65,17,17,17s17-7.65,17-17v-178.5
C325.833,146.767,318.183,139.117,308.833,139.117z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<g>
<g>
<path d="M4,18h14V4H4V18z M6,6h10v10H6V6z"/>
<polygon points="2,16 0,16 0,22 6,22 6,20 2,20 "/>
<polygon points="2,2 6,2 6,0 0,0 0,6 2,6 "/>
<polygon points="20,20 16,20 16,22 22,22 22,16 20,16 "/>
<polygon points="16,0 16,2 20,2 20,6 22,6 22,0 "/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 27.717 27.717" style="enable-background:new 0 0 27.717 27.717;" xml:space="preserve">
<g>
<g id="c74_volume">
<path d="M4.637,8.725H0v10.33h4.637l8.766,6.502c0,0,1.611,1.346,1.611-0.045c0-1.395,0-22.177,0-23.446
c0-1.092-1.418-0.025-1.418-0.025L4.637,8.725z"/>
<path d="M20.006,6.709c-0.461-0.46-1.207-0.46-1.668,0c-0.461,0.462-0.461,1.211,0,1.666c1.518,1.521,2.27,3.495,2.273,5.484
c-0.004,1.993-0.756,3.979-2.273,5.495c-0.461,0.459-0.461,1.211,0,1.672c0.23,0.23,0.531,0.344,0.836,0.344
c0.301,0,0.602-0.113,0.832-0.344c1.977-1.979,2.965-4.578,2.963-7.167C22.971,11.273,21.98,8.682,20.006,6.709z"/>
<path d="M23.207,2.994c-0.467-0.463-1.211-0.463-1.676,0c-0.457,0.463-0.457,1.208,0,1.671c2.549,2.548,3.822,5.869,3.824,9.206
c-0.002,3.352-1.27,6.694-3.824,9.25c-0.459,0.461-0.457,1.207,0,1.67c0.232,0.229,0.537,0.344,0.838,0.344
c0.303,0,0.607-0.115,0.838-0.344c3.006-3.018,4.51-6.973,4.51-10.92C27.717,9.937,26.203,5.996,23.207,2.994z"/>
</g>
<g id="Capa_1_145_">
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="461.55px" height="461.55px" viewBox="0 0 461.55 461.55" style="enable-background:new 0 0 461.55 461.55;"
xml:space="preserve">
<g>
<g id="volume-off">
<path d="M345.525,229.5c0-45.9-25.5-84.15-63.75-102v56.1l63.75,63.75C345.525,239.7,345.525,234.6,345.525,229.5z M409.275,229.5
c0,22.95-5.1,45.9-12.75,66.3l38.25,38.25c17.85-30.6,25.5-68.85,25.5-107.1c0-109.65-76.5-201.45-178.5-224.4V56.1
C355.725,81.6,409.275,147.9,409.275,229.5z M34.425,0L1.275,33.15L121.125,153H1.275v153h102l127.5,127.5V262.65L340.425,372.3
c-17.851,12.75-35.7,22.95-58.65,30.601v53.55c35.7-7.65,66.3-22.95,94.35-45.9l51,51l33.15-33.149l-229.5-229.5L34.425,0z
M230.775,25.5l-53.55,53.55l53.55,53.55V25.5z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>