Playing HLS file from a server with a HTML video tag

user_12911017 0
Viewed 9584

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>
http-live-streaming video html
2 Answers

Different browser have different support for video files and streaming formats.

Currently Desktop Safari and Edge latest version support 'native' HLS support but Desktop Chrome does not. You can see uptodate support info in a number places such as:

By 'native' in this context, it means the browser can recognise the streaming format or file type when it is included as the 'source' attribute within the HTML5 tag and play it without any further code or plugins etc.

To allow you play your file back on Chrome at this time the usual approach is to use a Javascript Video player which will use the browsers support for Media Source Extensions (MSE) to interpret and prepare the HLS steam for playback. Some common open source examples include:

There are plugins available also for Chrome to play HLS if you do not want to use one of the above players for some reason for your solution, but these require the user to have installed the plugin, whereas the above players should work on any up to date browser release for the major Desktop browsers.

user_3344020

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

  1. 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>
user_129110170
Related