如何在角组件中嵌入vimeo视频

Question

我有一个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 

那么我需要改变什么呢？

谢谢

Answer 1

不要尝试：

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];
}

确保你已经测试了所有的url，而不仅仅是https://vimeo.com/346340496/11432ab1db。当有一些未知的url以及时，放置正确的用户消息