Play unsupported HTML5 video formats in browser - html

Question

I am making a desktop application based on Electron + Vue. I need to play a video inside my application. The video source is always located locally, i.e. on the user's computer. And everything was great until I found out that HTML5 <video> tag does not support all video formats. After studying the theory, I learned that I can create a stream using a local video as a source and streaming it to a local address and than I can use this address as video tag's source. Before that, I had no experience with video decoding or streams. But I already did a preview using the fluent-ffmpeg framework which can also stream. I managed to split the video into chunks in .ts format and get outputed a .m3u8 file (this process is faster than I expected) which I can connect to the video tag's source. as I found out later, this requires a player with support for the HLS stream. I used video.js with plugin "videojs-contrib-hlsjs" but got the error "videojs-contrib-hlsjs.min.js? 8852: 1 Error loading media: File could not be played". And now I'm stuck again. I don't know if this will work at all. maybe there is another way to play the unsupported video formats in browser? in the future, I would like to not only play the video, but also add time stamps to the track, perhaps somehow manage the video, that's why it is so important for me to play the video in the browser. I think even if I can stream into video.js player that's not give me support for formats like .avi .mkv .flv and others.
<video controls>
<source :src="local\path\outputfile.m3u8" type="application/x-mpegURL">
</video>
ffmpeg(local\path\to\video.mp4)
.audioBitrate(96)
.outputOptions([
'-codec: copy',
'-hls_time 10',
'-hls_playlist_type vod',
'-hls_base_url http://localhost:8080/',
`-hls_segment_filename \local\path\%03d.ts`
])
.output(`\local\path\outputfile.m3u8`)
.on('progress', function(progress) {
console.log('Processing: ' + progress.percent + '% done')
})
.on('end', function(err, stdout, stderr) {
console.log('Finished processing!' /*, err, stdout, stderr*/)
})
.run()