Video.js: Dynamically adding video src but videojs wont play / gives error message Angular 2 implementation

[bvcxtds]

myapp.component.tsfile

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[];
  currentTab: VideoTab;
  videoUrl: string;
  // when angular creates a new instance of this componenet,
  // it calls the constructor function
  constructor() {
    this.videoTabs = [
      new VideoTab(
        'test',
        'test',
        'test',
        'https://d2s7o69x7ibgri.cloudfront.net/landingpage.mp4'
      ),
      new VideoTab(
        'test',
        'test',
        'test',
        'video-src2-test.mp4'
      ),
    ]
  }

  setCurrentTab(tab: VideoTab): void {
    this.currentTab = tab;
    console.log(tab.videoSrc);
  }
}

app.component.html file

<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>
<section class="tabs-container">
    <div class="row">
        <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>
    </div>
</section>

videotab.model.ts file

/**
 * Provides a Video object 
 */
export class VideoTab {
    constructor(
        public image: string,
        public description: string,
        public title: string,
        public videoSrc: string
    ) {}
}

Whenever i click on a tab to update my src attribute in my video tag i get the following error message

video.js:23482 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. MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."}

i know that my link for my src attribute is fine because it can load fine in a new tab. i'm new to using video.js so please forgive me if im overlooking something, other than that this looks like a promising player. cheers to all the help

[gkatsev]

Not exactly sure where videojs is involved above. Would you be able to create a reduced/live test case please? I'm not familiar with Angular much.

[davidgg]

Hi @bvcxtds

Have you tried different bindings? for example instead of using [src], try
src="{{ }}"
[attr.src]=""

<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>

[bvcxtds]

@davidgg thanks for replying and helping out, but that didnt work. when i get some time to develop im going to try to change the video src and then re-load the video player again...idk just debugging at this point. any suggestion / recommendation on how i can reload after changing the src attribute?

[davidgg]

@bvcxtds Next I would try to init the video programmatically. When adding a new component, in the afterViewChecked or similar hook:

videojs('example_video_id');

[bvcxtds]

@davidgg the following worked for me, but idk how. i had to inject the source element see below.

    var sourceTag = document.createElement('source');
    sourceTag.setAttribute('src', this.currentTab.videoSrc);
    sourceTag.setAttribute('type', 'video/mp4');
    document.getElementById('oaf_html5_api').appendChild(sourceTag);

but then i have to manually init the player. like so player.load() & player.play() other than that i can work with this. it would be nice to know why this solution worked for me.

[gkatsev]

Looks like this was solved?

[Akxe]

How is this solved? I just got the same issue, the workaround in good to have, but definitely not a solution, if I use player.src({ src, type }), I would assume it would create the source with type, so it can play as intended...