Playing M3U8 Files With HTML Video Tag

Playing HLS file from a server with a HTML video tag

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>

Playing m3u8 video with video tag

HLS is not supported on most browsers natively. But can be played via libraries such as hls.js.

html video tag not playing m3u8 file when serve by golang server

You have to set your header to the right type.
Try something like this:

func serveHandler(w http.ResponseWriter, r *http.Request){
  w.Header().Set("Content-Type", "application/x-mpegURL")

  tmpl := template.Must(template.ParseFiles("index.html"))
  tmpl.Execute(w, "videosource/index.m3u8")

}

Playing M3U8 Files With HTML Video Tag

Playing HLS file from a server with a HTML video tag

Playing m3u8 video with video tag

html video tag not playing m3u8 file when serve by golang server

Related Topics

Leave a reply