Hi Steve, I am assuming this a for a WebPage , and not for a android nor IOS app.
If my assumption is correct, a possible solution that I can imagine is the following:
Have your MP4 files in a specific folder of your web hosting. It is important that your application is in the sabe web hosting.
On the MP4 folder, you would need to have a JPG file with a picture of the video (perhaps the best image of the video) and save it in that folder. Therefore you will have one mp4 file and one jpg file per video.
On your application first, you would need to use several image controls (one per video). My recomendation is to generate it at runtime. The path of the image should be relative.
when the image is clicked, then with one video control on top (since you are not going to play several videos at the same time), on the src property you are going to put the relative path and video name.
Your code in general terms is correct; and you would need to use AJAX to retrieve the information of the file names (either for the mp4 and jpg). The code would be something like this: