HTML Embedding videos not in project directory - html

Question

I have an application which needs to embed videos (mp4, HTML5). The catch is that these videos can be located anywhere on the server hosting my application and not just in the directory of the app. If that were the case, my code would look something like this:
<video preload="auto" controls>
<source src="assets/media/video.mp4" type="video/mp4">
</video>
In my situation, my videos can be living in any location such as C:/Users/media/video.mp4 which would make me do something like this instead:
<video preload="auto" controls>
<source src="C:/Users/media/video.mp4" type="video/mp4">
</video>
The problem I run into is that Chrome (and other browsers most likely) obviously block this sort of external access. My workaround for this has been fetching videos at the server level (Tomcat server), converting them to a byte array, and giving that to my HTML. My Angular code sanitizes the byte array and then serves it to my HTML.
Angular:
this.http.get(url).subscribe(data => {
this.mediaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(data);
});
HTML:
<video preload="auto" controls width="75%" height="50%">
<source [src]="mediaSrc" type="video/mp4">
</video>
This strategy works some of the time. However, every so often my video completely stops working and doesn't display in Chrome. This only happens some of the time and seems to be completely random. Almost as if chrome runs out of memory and or blocks the video if it doesn't like it. Loading the page in a new tab however completely fixes the problem.
My question: is there a better way to deliver video from the server level or is there something I can fix with my current implementation so that I don't run into the issue mentioned above? I would love to go into my issue more but I really can't put my finger on what is causing this issue to randomly occur and only on a given tab of a given browser.

Answer 1

Video not working was fixed by using .webm videos on Chrome instead of mp4.