heres what im trying to achieve. Im trying to update a value in a component whenever a user clicks on another component. take a look at my code
here is my app.component.html file
<div class="col-sm" *ngFor="let tabs of videoTabs">
<!-- this is where i want the user to click on -->
<div class="tabs hvr-back-pulse">
<div class="row">
<div class="text-center col-sm-4">
<img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
</div>
<div class="col-sm-8">
<small>{{ tabs.title }}</small>
<p>{{ tabs.description }}</p>
</div>
</div>
</div>
<!-- eof click container -->
</div>
here is my app.component.ts file *****UPDATED******
import { Component, EventEmitter } from '@angular/core';
import { VideoTab } from './videotab.model'; //importing our video class so we can use it
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
videoTabs: VideoTab[];
// when angular creates a new instance of this componenet,
// it calls the constructor function
constructor() {
this.videoTabs = [
new VideoTab(
'https://videosrc.video.net/video.png',
'test',
'test',
'test'
),
new VideoTab(
'https://1111111.cloudfront.net/landingpage.mp4',
'test',
'test',
'test'
),
]
}
setCurrentTab(tab: VideoTab): void {
this.currentTab = tab;
}
}
videotab.model.ts file
/**
* Provides a Video object
*/
export class VideoTab {
constructor(
public image: string,
public description: string,
public title: string,
public videoSrc: string
) {}
}
this is where i would like the component to update the value in my video tag on the src attribute ****UPDATED TO USE VIDEO.JS********
<video id="background" class="video-js" loop controls preload="auto" width="100%" height="100%" poster="" data-setup="{}">
<source [src]="currentTab?.videoSrc" type='video/mp4'>
</video>
right now my video tag isnt in its own component its currently in the app.component.html file where my tabs live. Thanks for all the help. I'm reading a book on how to develop Angular 2 apps, so this is all still new to me. thanks for all the help again!!!
**** UPDATED ****
When loading src attribute dynamically with tabs i get the following error message from video.js
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. When i load my cloudfront link with my mp4 file in a new tab everything is loaded fine. Thanks for all the help
In my situation.I am getting the video file from one component to this component with @input binding,its has the title,description as like your video tabs,I think your are not using videojs in your component html video tag.check this below code
Update: import videojs playlist js files into your index.html and add the below code.it will change the video src dynamically of your videojsplayer
import {Component, ElementRef, OnInit, OnDestroy, Input} from '@angular/core';
import {SaveVideoFile} from '../../models/SaveVideoFile';
@Component({
selector: 'video-play',
templateUrl :'./play-video.html',
styleUrls: ['']
}
export class AppComponent implements AfterViewInit, OnInit, OnDestroy{
@Input() selectedVideo: SaveVideoFile; // getting video file from another component
currentTab: VideoTab;
videoUrl: string;
videoJSplayer: any;
constructor(){}
showVideo(video: SaveVideoFile) { // getting one selectedVideofile from array of videos when you click on related videos
console.log("videoComponent showVideo()");
this.selectedVideo = video; // assining the new video file to existing selectedVideo
this.videoUrl = this.selectedVideo.videoPath; // assining the new videoSrcUrl to exsting videoSrcUrl
this.videoUrl = 'http://vjs.zencdn.net/v/oceans.mp4';
this.videoPlayListSource(this.videoUrl);
}
videoPlayListSource(videosrc:string){
this.videoUrl = videosrc;
const self = this;
this.videoJSplayer.playlist([{ sources: [{ src: self.videoUrl,
type: 'video/mp4' }]}]);
}
ngOnInit(){
this.videoUrl = this.selectedVideo.videoPath; // setting the selectedVideo file src here
this.videoUrl = 'https://yanwsh.github.io/videojs-panorama/assets/shark.mp4';
this.videoJSplayer = videojs(document.getElementById('example_video_11'), {}, function() {
let player = this;
this.ready(function() {
this.bigPlayButton.hide();
this.play();
});
});
}
ngOnDestroy() {
console.log('Deinit - Destroyed Component')
this.videoJSplayer.dispose();
}
}
html:
<div>
<video id="example_video_11" class="video-js vjs-default-skin"
controls preload="auto" width="630" height="320"
data-setup='{"example_option":true}' [src]=videoUrl>
<source [src]=videoUrl type="video/mp4" />
</video>
</div>
<div class="col-sm" *ngFor="let tabs of videoTabs">
<!-- this is where i want the user to click on -->
<div class="tabs hvr-back-pulse" (click)="showVideo(tabs)">
<div class="row">
<div class="text-center col-sm-4">
<img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
</div>
<div class="col-sm-8">
<small>{{ tabs.title }}</small>
<p>{{ tabs.description }}</p>
</div>
</div>
</div>
<!-- eof click container -->
</div>
Plunker : Video Js Plunker
You can intercept click on each tab by event binding (...) then save the clicked tab into a property currentTab of your component, then you can do a property binding with [prop]="..." to get back the current tab into the src of the video tag:
Template:
<div class="col-sm" *ngFor="let tabs of videoTabs">
<!-- this is where i want the user to click on -->
<div class="tabs hvr-back-pulse" (click)="setCurrentTab(tabs)">
<div class="row">
<div class="text-center col-sm-4">
<img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
</div>
<div class="col-sm-8">
<small>{{ tabs.title }}</small>
<p>{{ tabs.description }}</p>
</div>
</div>
</div>
<!-- eof click container -->
</div>
<video>
<source [src]="currentTab?.videoSrc">
</video>
Component:
export class AppComponent {
currentTab: VideoTab;
setCurrentTab(tab: VideoTab): void {
this.currentTab = tab:
}
//.....
}
