Video not loading in EJS, (node.js server) - html

Question

I am using node.js server to upload a video. I am successfully able to add it in /public/uploads folder of my project and save the FilePath to MongoDB.
Inside my ejs, file, I am retrieving videos, by following segment of code
//Videos is the array of objects which I have retrieved from mongoDB
//video.VideoFilePath is in the form "public/uploads/1591780899727_Test_00000.mp4" (i.e filename.mp4)
<%Videos.forEach(function(video){%>
<video width="320" height="240" controls>
<source src="<%=video.VideoFilePath%>" type="video/mp4">
</video>
<%});%>
In the console, I a getting the following errors
HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:5000/public/uploads/1591780899727_Test_00000.mp4 failed.
All candidate resources failed to load. Media load paused.
Earlier I thought this might be due to path, but I have tried using the absolute path as well it doesn't work. I have tested on both Firefox and chrome, it doesn't work in any case.
I have taken care of public directory inside my app.js, if that is the concern.
app.js
app.use(express.static(__dirname + "/public"));
Kindly, lemme know how can I fix this I have read many stack overflow posts, none seems to help.

Answer 1

I had the same issue, I realized I hadn't set my Video File Path Source as a static directory
In my app.js I added this
app.use('/videofiles', express.static('/videofiles'))
hope this helps.