Показать файл в браузере с сервера, используя angular

Question

Я хочу воспроизвести видеофайл в своем браузере.

Я использую для этого атрибут 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 для бэкэнда.

Answer 1

Я нашел решение для этого.

Сначала я должен был разместить папку, где файлы будут обслуживаться angular. Для этого я использовал http-сервер, как показано здесь Создать http-сервер

После этого я упомянул путь к файлу в соответствии с моим ip (или использовал localhost). Таким образом, я смог воспроизвести видео в angular.

Также обратите внимание: если ваш источник видео представляет собой массив файлов, вам придется использовать santizer из DomSanitizer чтобы сделать URL безопасным.

Answer 2

<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>