gpt4 book ai didi

javascript - 如何在 Angular 分量中嵌入vimeo视频?

转载 作者:行者123 更新时间:2023-12-02 20:56:12 25 4
gpt4 key购买 nike

我有一个 Angular 8 应用程序。我尝试嵌入 vimeo 视频。

所以我有这样的 ts:

getVideoId(url, prefixes) {
const cleaned = url.replace(/^(https?:)?\/\/(www\.)?/, '');
for (let i = 0; i < prefixes.length; i++) {
if (cleaned.indexOf(prefixes[i]) === 0) {
return cleaned.substr(prefixes[i].length);
}
}
return undefined;
}

getVimeoId(url) {
return this.getVideoId(url, ['vimeo.com/', 'player.vimeo.com/']);
}

getVideoSafeUrl(url: string): SafeResourceUrl {

const embedUrl = this.parseYoutubeUrl(url);
const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
this.parseVimeo(embedUrl));

return safeUrl;
}

和这样的模板:

 <iframe
*ngIf="videoUrl.value"
class="video-iframe"
type="text/html"
[src]="getVideoSafeUrl(videoUrl.value)"
frameborder="0"
allowfullscreen
></iframe>

但是当我尝试插入 vimeo 视频时:https://vimeo.com/346340496/11432ab1db

我收到此错误:

VM7131 vendor.js:76269 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '346340496'
Error: Cannot match any routes. URL Segment: '346340496'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2432)
at CatchSubscriber.selector (router.js:2413)
at

那么我必须改变什么?

谢谢

最佳答案

尽量不要:

https://vimeo.com/346340496/11432ab1db

但在 iframe 中用作 [src] 时采用以下 url 格式

https://player.vimeo.com/video/346340496

您需要相应地编写解析器,例如

  function  parseVimeo(url) {
const re = /\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i;
const matches = re.exec(url);
return matches && "https://player.vimeo.com/video/"+matches[1];
}

确保您已经测试了所有网址,而不仅仅是 https://vimeo.com/346340496/11432ab1db 。当存在一些未知网址时,也放置适当的用户消息

关于javascript - 如何在 Angular 分量中嵌入vimeo视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61478227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com