如何在angular 8中使用iframe用于非youtube视频

Question

我正在使用下面的代码来嵌入youtube url，它运行得非常好。但现在我有一个网址，它来自我的sharepoint帐户。我想玩那个，但没用。请帮帮我。

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" type="text/html" webkitallowfullscreen
mozallowfullscreen allowfullscreen width="600" height="400" [src]="url">
</iframe>

之前url的代码如下所述，运行良好，我可以播放我的视频

const safeURL = https://www.youtube.com/embed/${this.data?.videoID}?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0;
this.url = this.safePipe.transform(safeURL, 'resourceUrl');

但现在我想像这个一样更改url的值

this.url = 'https://abc-my.sharepoint.com/:v:/p/abc/EZD14y8daXNMpxefWdmVOj8BxpWcHM7RHRq6GyCb8Dv0Gw';

但现在我无法播放我的视频。你能帮我在我的angular 8应用程序中播放非youtube视频吗。

Answer 1

<iframe>标记不会像浏览器导航到SharePoint托管视频时那样智能地消化内容和输出标记。

Youtube嵌入URL不是视频文件的URL，它们有标记，这就是为什么播放器不同于默认浏览器的视频播放器。

如果您在浏览器中转到该SharePoint视频并查看页面的源代码，您会看到添加了一些内容，但如果您运行wget https://thevideourl.com/myvideo.mp4，则只下载视频，而不是包含引用视频的视频标记的html文档。

考虑使用具有src属性的<video>标记。例如：

<!-- Instead of... -->
<iframe src="https://sharepoint.com/thevideourl"></iframe>

<!-- Do... ->
<video src="https://sharepoint.com/thevideourl"></video>

现在，它在SharePoint中的事实引发了一个问题，即在给定上述代码的情况下，您的浏览器是否能够访问视频。我不确定它是否能正确地验证你。