iframe [src] = "videoUrl | sanitize" - когда перезагрузка страницы вызывает 404 iframe моего сайта - PullRequest
Новая
       30

iframe [src] = "videoUrl | sanitize" - когда перезагрузка страницы вызывает 404 iframe моего сайта

0 голосов
/ 28 июня 2018

Я пытаюсь загрузить videoUrl из базы данных и назначить его в iframe [attr.src], чтобы показать видео на YouTube. Данные должны поступать из базы данных, для меня нет другого пути, кроме как загрузить видео и показать то, чего мы не можем сделать в данный момент.

Проблема в том, что каждые пару секунд он постоянно обновляется, и видео на короткое время мигает.

Есть ли способ избежать этого?

Это код, который я имею в виду для iframe и метода, который возвращает URL. 

<iframe
  class="courseVideo row col-md-12 col-sm-12 col-xs-12 text-center"
  height="300"
  id="introVideoUrl"
  [src]="getIntroVideoUrl(section.introVideoUrl)"
  frameborder="0" allow="autoplay; encrypted-media"
  allowfullscreen
  style="margin-top: 15px;">
</iframe>

getIntroVideoUrl(url) {
  return this.sanitizer.bypassSecurityTrustResourceUrl(
    "https://www.youtube.com/embed/" + url
  );
}

- РЕДАКТИРОВАТЬ ПОСЛЕ ПРЕДЛОЖЕНИЯ ДжеремиW - Итак, мне удалось получить то, что @JeremyW упоминал ниже. Как таковой, он больше не постоянно обновляется. Мне нужно было внести некоторые коррективы, и вместо того, чтобы делать это таким образом, я просто сделал собственную трубу «Дезинфицирующее средство».

Но я воссоздал его так, как он упомянул, и результат такой же, как и у канала, канал был просто способом, которым я могу постоянно использовать его, и мне не нужно беспокоиться о переписывании этого каждый раз.

Однако сейчас я сталкиваюсь и спрашиваю, где, если я обновлю страницу, иногда вместо видео на YouTube отображается версия моего веб-сайта Iframed, ведущая на страницу 404.

Любая причина, почему это происходит, или кто-то может указать мне на источник, который объясняет это? Я не мог найти причину для этого.

Спасибо!

1 Ответ

0 голосов
/ 29 июня 2018

Я подозреваю, что это связано с тем, как работают привязки свойств Angular. Мне не удалось легко найти источник для проверки моего подозрения, но я думаю, что каждый раз, когда Angular проверяет значение атрибута src, чтобы увидеть, изменилось ли оно, оно будет повторно вызывать функцию ... вызывая ее обновить значение атрибута - вызывая перезапуск, который вы видите.

В прошлом я совершал нечто подобное, вот несколько фрагментов моего кода, которые помогут вам в этом. Короче говоря, вместо того, чтобы вызывать функцию из HTML, укажите атрибут [src] для переменной, а затем используйте функцию в файле TS, чтобы установить правильное значение этой переменной:

HTML: 

<iframe 
  *ngIf="homeVideo"
  [src]="homeVideo"
  frameborder="0"
  gesture="media"
  allow="encrypted-media"
  allowfullscreen>
</iframe>

TS: 

export class HomeComponent implements OnInit {
    // Video Url
    homeVideo;

    ngOnInit() {
        // Pull updated content from Firebase
        this.getContent();
    }

    getContent() {
        this.contentService.getPageContent('homePage').then( pageContent => {
            this.homeVideo = this.sanitizer.bypassSecurityTrustResourceUrl(pageContent.homeVideo);
        }
    }
}
...