Using playlist in webdev module to play long video

I'm trying to reproduce a video in webdev, the original file of the video was about 300MB so I compressed it with lossless compression and got around 60MB, I then segmented the video using ffmpeg using the following command

ffmpeg -y -i video_low_res_high_quality.mp4  -c:v copy -c:a copy  -f segment -segment_time 4  -segment_list playlist.m3u8 segment_%3d.ts

I also tried this command but with same results

ffmpeg -y -i video_low_res_high_quality.mp4  -c:v copy -c:a copy  -f hls -hls_time 4 -hls_list_size 0 -hls_segment_filename hls_segment_%3d.ts segment_hls.m3u8

I segemented the video every 4 seconds since it's only 38 seconds long so I got 10 segment of around 6MB each and the playlist file.
I can upload all the files to the webdev folder inside the designer, also setting Content-Type as video/mp2t for the .ts files and application/vnd.apple.mpegurl for the playlist.m3u8 file.
I edited the playlist file using this path as the url of the segment

{session.props.gateway.address}+ "/system/webdev/vid1fragmented/segment_000.ts"

and when passing the mounted path of the playlist file to the video player I keep getting the "File not valid" Error inside the browser.

I tried several attempts both using .ts file and .mp4 but never been able to show the full video through the playlist. Does anyone knows what I'm doing worng?
P.S. I followed some suggestion from this post to get to this point Playing a video using WebDev