videojs не работает в приложении angular 2

Question

videojs не работает в приложении angular 2

Я использую компонент с функцией, которая выполняет url-адрес видео через подписку.

Тег отображается только при наличии url-адреса.

Тег видео запускается normamenel, однако css не выполняется.
Я использую video-js для тега video.

this.postServices.getPost(id).subscribe( (res) => {



this.video = 'http://127.0.0.1:9111/api/get/video.mp4';



})

Шаблон

<video *ngIf="video"

                 class="video-js"

                 controls preload="metadata" autoplay="true" >

              <source [src]="video" type="video/mp4" />

          </video>

560 1

angular video.js

1 ответ:

Comments

Ничего не найдено.

dlcardozo · Accepted Answer · 2017-10-30 22:32:39

Не забудьте добавить:

<link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">

В ваш раздел <head></head> в вашем индексе.html

Также добавьте скрипт videojs в свой индекс.html:

<script src="http://vjs.zencdn.net/6.2.8/video.js"></script>

Затем, когда вы запускаете запрос на url в вашем сервисе, вы должны инициализировать плеер:
declare let videojs: any; // just to avoid TS stuffs for this demo
player: any;

this.postServices.getPost(id).subscribe( (res) => {
    this.video = 'http://127.0.0.1:9111/api/get/video.mp4';
    // Just to be sure that you have the video tag available
    setTimeout(() => player = videojs('player'), 100);
})
Шаблон:
      <video *ngIf="video" id="player"
             class="video-js"
             controls preload="metadata" autoplay="true" >
          <source [src]="video" type="video/mp4" />
      </video>
С этим должно работать, но это не проблема с *ngIf, это связано с использованием videojs lib.