Angular 9 односторонняя привязка не работает на HTML5 видео - PullRequest
Новая
       78

Angular 9 односторонняя привязка не работает на HTML5 видео

0 голосов
/ 12 июля 2020

У меня есть следующий фрагмент HTML5 в домашнем компоненте. html: 

 <div id="main-tv-cabinet">
            <video id="tv" autoplay preload="auto" controls
                width="640" height="480" 
                (ended)="onTvPreviewEnded()">

                <source src="{{sermonForPreview}}" type="video/mp4">
                
                    Sorry, your browser doesn't support embedded videos.

            </video>
        </div>

Моя модель просмотра выглядит следующим образом: 

export class HomeComponent {

  private sermonIndexForPreview : number = 0;
  private sermonsForPreview : string[] = [];
  public sermonForPreview = "";

  constructor() 

    this.sermonsForPreview.push("assets/videos/previous-sermon-snippet-1.mp4");
    this.sermonsForPreview.push("assets/videos/previous-sermon-snippet-2.mp4");

    this.sermonForPreview= this.sermonsForPreview[0];
  }
 }

  public onTvPreviewEnded(){
    
    this.sermonIndexForPreview = (this.sermonIndexForPreview + 1) % 2;
    this.sermonForPreview = this.sermonsForPreview[this.sermonIndexForPreview];

    this.restartVideoPlayer();
    console.log(this.sermonForPreview);
  }

  private restartVideoPlayer() {
    var tvScreen: any = document.getElementById("tv");

    // TO FIGURE: why is binding not working here?
    tvScreen.src = this.sermonForPreview;
    
    if (tvScreen.paused) 
      tvScreen.play();
    else tvScreen.pause();
  }
}

Когда воспроизведение видео заканчивается первый, я ожидаю, что второй будет играть, а когда второй будет готов, вернемся к первому, et c. Возникает петля, но элемент видео застревает на том видео, которое находится первым в списке, если я не закомментирую строку 

 tvScreen.src = this.sermonForPreview;

Я понимаю, что односторонняя привязка должна отражать изменения в модели представления обратно в Посмотреть. Я даже пробовал двустороннее назначение ставок с синтаксисом [()], но это не помогло. Что я пропустил?

1 Ответ

1 голос
/ 12 июля 2020

Взгляните на созданный мной StackBlitz.

https://stackblitz.com/edit/angular-ivy-ela9eq

  • Ваша привязка не работала, поскольку вы пытались установить src к тегу video, а не к тегу source.
  • Вы объединяли привязку данных Angular и базовую c JavaScript (в вашем методе restartVideoPlayer()). Вы должны мыслить декларативно и, если можете, использовать только привязку.
...