使用角度在服务器的浏览器中显示文件答案

【问题标题】：Display file in browser from server using angular使用角度在服务器的浏览器中显示文件
【发布时间】：2020-02-28 16:23:16
【问题描述】：

我想在浏览器中播放视频文件。

我正在为此使用 html video 属性。下面是我的html代码

<video controls controlsList="nodownload" (click)="toggleVideo()" #videoPlayer width="40%" height="40%">
    <source [src]="videoSource" type="video/mp4" />
     Browser not supported
</video>

和ts代码：

toggleVideo(event: any) {
  this.videoplayer.nativeElement.play();}

如果我将videosource 中的路径指定为我的本地机器（例如：D:/Videos/video.mp4），则它不允许加载文件（无法加载本地资源错误）目前，当它是资产文件夹时，视频正在播放，但我的系统将文件上传到服务器，我必须从那里访问它。我怎样才能提供它的路径。我正在使用 tomcat 服务器作为后端。

【问题讨论】：

标签： typescript angular8

【解决方案1】：

<button onclick="playVid()" type="button">Play Video</button>


    <video id="myVideo" width="320" height="176">
        <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>

    <script>
        var vid = document.getElementById("myVideo");

        function playVid() {
            if (vid.paused) {
                vid.play();
            } else {
                vid.pause();
            }

        }
    </script>

【讨论】：

感谢您的回答。但我想从服务器机器而不是从 URL 播放视频。有什么帮助吗？
您好，同样的，您需要一些 API 如何在服务器中向您发送文件视频的链接，您可以在源 src 中添加链接

【解决方案2】：

我已经找到了解决办法。

首先，我必须托管一个文件夹，文件将在其中提供给 angular。为此，我使用了 http 服务器，如下所示Create http server

之后我根据我的ip（或使用localhost）提到了文件路径。这样我就能够以角度播放视频。

另请注意，如果您的视频源是一组文件位置，那么您将不得不使用 DomSanitizer 中的 santizer 来确保 URL 安全。

【讨论】：