0

I want to play a video file in my browser.

I Am using html video attribute for that. Below is my html code

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

and ts code :

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

If I specify the path in videosource as my local machine (eg : D:/Videos/video.mp4) then it does not allow to load the file(Local resource cannot be loaded error) Currently the video is playing when it is the assets folder, but my system uploads files to a server and I have to access it from there. How can I provide the path for it. I am using tomcat server for backend.

Kevin Ethen
  • 1
  • 5

2 Answers2

0
<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>
corsaro
  • 731
  • 1
  • 9
  • 24
  • Thanks for your answer. But I want to play the videos from a server machine and not from a URL. Any help with that? – Kevin Ethen Feb 22 '20 at 15:35
  • Hi it s the same just you need to have some API how send you the link for your file video in the server and you can add the link in the source src – corsaro Feb 25 '20 at 10:52
0

I have found a solution to this.

First I had to host a folder where the files will be served to angular. For that I used http server as shown hereCreate http server

After that I mentioned the filepath according to my ip (or use localhost). This way I was able to play the videos in angular.

Also note,If your video source is an array of file locations then you will have to use santizer from DomSanitizer to make the URL safe.

Kevin Ethen
  • 1
  • 5