Я установил все необходимые импорты для воспроизведения mat-video, но по-прежнему не могу воспроизвести видео с расширенной ссылки или веб-сайта, например youtube, или даже с моего диска Google. Ниже приведены импортные данные, которые я установил из npm, * @ angular / cdk,@angular/material,@angular/animations, молот js, мат-видео. Все это прекрасно работает, за исключением случаев, когда я вставляю ссылку из моего хранилища видео в мой атрибут sr c,
Вот как я вызываю mat-video
<p>watch works!</p>
<mat-video src={{videoUrl}}>
</mat-video>
Ниже приведен компонент
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-watch',
templateUrl: './watch.component.html',
styleUrls: ['./watch.component.css']
})
export class WatchComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
videoUrl:any;
ngOnInit(): void
{
this.route.paramMap
.subscribe(params=>
{
this.videoUrl =params.get('results')
})
}
}
Ниже приведен json файл, в который я вставляю ссылки для моего видео
{
"trailerId":3,
"trailerName":"Bloodshot",
"date_of_Release":"26-03-2019",
"trailerVideo":"https://youtu.be/KK8FHdFluOQ",
"trailerImg":"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSk-Xjs0S4KVnLByZNpAT-oaFmzlcS8xVzJL9sGTXUIRw7s2aMh"
},
Ниже приведена ошибка, которую я получаю
mat-video.js:303 Unhandled Video Error Eventbubbles: falsecancelBubble: falsecancelable: truecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: (11) [video.video, div.videoplayer.show-mouse, mat-video, app-watch, div.row, div.container, app-root, body, html, document, Window]returnValue: truesrcElement: video.videotarget: video.videotimeStamp: 4064.0000000003056type: "error"__proto__: Event
callback @ mat-video.js:303
