How to play flv video links in browser

Updated: at 09:12 AM

If you are working with videos and video links in flv format, you will wonder how to play flv in the browser. In this article I will show you a code example to do this.

Table of contents

Open Table of contents

Prerequisites and usage

Create file html

  1. Create file index.html with code below:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <title>Live CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
  </head>
  <body style="background:#000;color:#fff;">
    <video
      id="videoElement"
      controls
      style="position:fixed;right:0;bottom:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:fill;"
    ></video>
    <script>
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          url: "https://your-domain/live/livestream.flv",
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    </script>
  </body>
</html>

    If you live streaming you need set isLive: true

Check if the video works on the browser

  1. Open an HTML file in your browser

If you open the file in your browser, you will see your video playing. With this, you have completed the sample FLV playback on the client