视频标签在Angular中失效

Question

我正在做一个Angular应用程序，我在html中使用视频标签。我的代码如下。

<div id="display-check-in-open" class="pi-container">
    <video autoplay>
        <source src="path to the video" type="video/mp4">
    </video>
</div>

视频路径需要在src中给出。如果我给一个直接路径，比如 "C:UsersVideosvideo1.mp4"，视频就会被加载。但我将从组件中的一个变量中动态获取路径，尽管视频名称将保持不变。在组件中，我有一个名为videoPath的变量，它的值将是类似于以下的东西

this.videoPath = C:/Users/Videos/

以上路径可能会从属性文件中动态变化。现在当我试图访问视频标签src中的videoPath变量时，视频没有显示。

我尝试了以下方法。

<div id="display-check-in-open" class="pi-container">
    <video autoplay>
        <source src=videoPath + "video1.mp4" type="video/mp4">
    </video>
</div>

但是上面的代码没有工作，而且在""里面显示的是红色的文字，也就是说视频名称在VS代码中显示为红色，说明上面的东西是错误的。我怎样才能正确地做呢？