Pemutar media yang ditempatkan di iframe tidak dapat diputar dengan Angular

Aug 21 2020

Saya mencoba menambahkan pemutar media MP3 ke aplikasi saya dari layanan eksternal menggunakan iframe (untuk masalah saya, situs web Krakenfiles). Saya ingin meneruskan tautan ke src menggunakan variabel.

Saya menggunakan SafeResourceUrl dan DomSanitizer untuk menangani keamanan, yang dalam hal ini diperlukan oleh angular.

safeSrc: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {
  this.safeSrc =  this.sanitizer.bypassSecurityTrustResourceUrl(
    'https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020');
  }

Setelah mendeklarasikan variabel, saya membalik variabel ke kode html (di dalam deklarasi iframe):

<iframe [src]="safeSrc" width="450" height="100" frameborder="0"></iframe>

gambar pemutar media rusak dari layanan krakenfiles

Seperti yang Anda lihat di atas, iframe ditampilkan di halaman, tetapi kontennya tidak terlihat dan pemutar tidak bereaksi apa pun.

Saya curiga kesalahannya ada di tautan, jadi saya mencoba memanggil tautan tanpa meneruskan variabel ke iframe src dan yang mengejutkan itu berhasil (kode di bawah ini berfungsi dengan benar).

<iframe src="https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020" width="450" height="100" frameborder="0"></iframe>

Menurut saya, mungkin masih ada beberapa batasan dari Angular terkait dengan passing ke variabel

gambar pemutar media bekerja dengan benar

Apakah kamu punya ide

Jawaban

Oskarro Aug 21 2020 at 14:46

Anda harus mengganti &amp;dengan &.

Angular dan Web Browser dapat memahami tanda ini, sedangkan dalam kode HTML kita perlu memasukkan referensi karakter untuk "An ampersand" ( &amp;)

1 Roy Aug 21 2020 at 04:27

Sepertinya file sumber tidak ada. Ini bukan masalah sudut. Ketika Anda pergi langsung ke halaman https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020%27Anda melihat file yang rusak.