Playing HLS file from a server with a HTML video tag

So what I'm trying to do is to play a HLS m3u8 file from an Backblaze B2 bucket that I have (via B2's S3 API) . The problem that I have is an HLS file is made up of both the .m3u8 file which keeps track of all the .ts files which are the parts that the .m3u8 file needs to play. So the problem I have is when putting the .m3u8 file into an HTML video tag nothing happens even in a browser where HLS files are compatible i.e Google Chrome.

I have checked other similar questions, but none of them seem to work, because the ts files are always missing.

I know the problem is the .ts files are missing but I have no clue how to reference them as well from my web server. Is there any way I can somehow play a HLS file and all its parts from a HTML video tag?

My current code is like so:

    <video width="1920" height="1080" controls>
     <source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
     Your browser does not support the video tag.
   </video>

Solution

Okay so I've found a solution to my problem using video.js + video.js http streaming.

I needed to set my CORS rules on my Backblaze B2 Bucket, it's a setting on the screen with all your buckets to "Share everything in this bucket with all origins."

Next I just used this code segment using both video.js and the plugin for it for hls streaming for all major browsers with it which is video streaming https. Both of them just require a simple script tag from their respective cdns.

The documentation you need is found here: https://videojs.com/getting-started/ and here: https://github.com/videojs/http-streaming and you need both as they perform different functions. So the code that I found finally works in my case is:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Video</title>
    <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
    <!-- For IE8 (for Video.js versions prior to v7)
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    -->
  </head>
  <body>
   <h1>My Video</h1>
   <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
   </video-js>
   <!--This is for Video.js by itself -->
   <script src="https://unpkg.com/video.js/dist/video.js"></script>
   <!--This is for HLS compatibility with all major browsers-->
   <script src = "https://unpkg.com/browse/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
   <script>
    var player = videojs('my_video_1');
   </script>
  </body>
</html>