File
Implements
Metadata
| selector |
tc-tibco-cloud-video |
| styleUrls |
./tibco-cloud-video.component.css |
| templateUrl |
./tibco-cloud-video.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
togglePlaying
|
togglePlaying(status: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| status |
boolean
|
No
|
|
|
Public
playing
|
Default value : false
|
|
|
import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {Location} from '@angular/common';
@Component({
selector: 'tc-tibco-cloud-video',
templateUrl: './tibco-cloud-video.component.html',
styleUrls: ['./tibco-cloud-video.component.css']
})
export class TibcoCloudVideoComponent implements OnInit {
@Input() visible: boolean;
@Input() title: string;
@Input() label: string;
@Input() url: string;
public playing = false;
constructor(public location: Location) { }
ngOnInit(): void {
}
togglePlaying(status: boolean) {
this.playing = status;
}
}
<div class="video-section" *ngIf="visible">
<div class="video-container">
<!--div class="video-title" title="{{title}}">
<p *ngIf="!playing">{{label}}</p>
</div-->
<video class="video-card" controls controlsList="nodownload" (play)="togglePlaying(true)" (pause)="togglePlaying(false)" (playing)="togglePlaying(true)">
<source [src]="url | urlPrepare: location">
</video>
</div>
</div>
* {
font-family: "Source Sans Pro";
}
.video-container {
width: 336px;
height: 206px;
max-width: 336px;
min-width: 336px;
max-height: 206px;
min-height: 206px;
}
.video-section {
display: flex;
flex-direction: row;
justify-content: center;
}
.video-card {
box-sizing: border-box;
width: 336px;
height: 206px;
max-width: 336px;
min-width: 336px;
max-height: 206px;
min-height: 206px;
background: white;
position: relative;
overflow: visible;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.video-title {
position: relative;
left: 0;
width: 100%;
cursor: pointer;
opacity: .5;
height: 30px;
line-height: 30px;
z-index: 1;
top: 35px;
margin-top: -20px;
font-size: 16px;
}
.video-title > p {
width: 100%;
background-color: #f3f3f3;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
Legend
Html element with directive