How to play FLV videos using Video.js player?

Video.js is a very popular library for creating a web video player for videos, which has been built on HTML5 from the scratch. Video.js supports all the basic video formats like mp4, WebM, Flv, etc. It is very effortless and straightforward to create a modern web video player in video.js for these various video types.

However, the procedure is a little different for flv-type video formats. In this article we’re going to learn how to play the flv videos using the video.js web player.

First, let’s start with how to create a basic web player in video.js using mp4 and WebM video format.

How to Create a Video Player?

Example

Consider the code given below for creating a basic web video player in video.js −

<!DOCTYPE html>
<html>
<head>
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
</head>
<body>
   <video
      class="video-js"
      id="my-videos"
      width="560"
      height="264"
      data-setup='{}'
      controls="true"
      autoplay="true"
      muted
      preload="auto">
   >
      <source
         src="https://www.tutorialspoint.com/videos/sample480.mp4"
         type="video/mp4"
         id="my-video1"
      >
      <source
         src="https://www.tutorialspoint.com/videos/sample720.webm"
         type="video/webm"
         id="my-video2"
      >
   </video>
   <script src="https://vjs.zencdn.net/7.19.2/video.min.js">
      const player = videojs(document.querySelector('.video-js'));
   </script>
</body>
</html>

In the above code snippet − we’ve done the following −

  • We’ve imported video.js using the CDN URL in the <href> tag enclosed within the <link> tag.

  • Further, we’ve used the <video> tag with the class as ‘video-js and id as ‘myvideos’. This to make ensure that video.js creates a video for our videos.

  • data-setup='{}' has been used on the video tag to make sure that if our video element is not created when the web page is loaded then video-js can load it later.

  • In the first <source> tags, we’ve given the path to our video files. Since the format of the first video file is an mp4 file, so the type is also ’video/mp4’; while the format of the second video is webm, so the type is mentioned as ‘video/webm’

  • At last, we’ve used the <script> tag where we’re creating a video-js function for the class name as ".video-js". This will provide us with more control over our web player.

Note − To run the above code, you will need to update the "src" value Inside the <source> tag, with the path of your mp4 or webm files.

Now, since we’ve understood how to create a simple video player with mp4 and webm files, let’s create a video player for the FLV format video in the next section of the video.

Creating a Video Player for "flv" Video using Video.js

Creating a video player for an FLV format video is not as straightforward as it was for the other video types. We need to do some extra steps to play an VLV video. First of all, we need to include videojs-flash in our project to create a flash player for the FLV video.

Consider the below command for including videojs-flash in our project.

<script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script>

Basically, we’ve included the videojs-flash URL inside the src attribute in the <script> tag.

Once the videojs-flash has been included in our project, now we need to change the mime type of our video to ‘video/flv’ inside the <source> tag.

Find the below code for changing the type of flv video −

<source src="https://www.tutorialspoint.com/videos/my_flv_video.flv" type="video/flv">

So, we’ve changed the type of our video to "video/flv" and the source to our video with the FLV format.

Example

Complete example for creating a video player for flv video.

<!DOCTYPE html>
<html>
<head>
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
</head>
<body>
   <video
      class="video-js"
      id="my-video"
      width="560"
      height="300"
      data-setup='{}'
      controls="true"
      autoplay="true",
      preload="auto">
   >
      <source
         src="https://www.tutorialspoint.com/videos/sample720.flv"
         type="video/flv"
         id="my-flv-video"
      >
   </video>
   <script src="https://vjs.zencdn.net/7.19.2/video.min.js">
      const player = videojs(document.querySelector('.video-js'));
   </script>
   <script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script>
</body>
</html>

In the above example, we’ve created a video player for a video with flv format.

Points to consider

  • We’ve used include videojs-flash which is going to create a flash payer inside which our Flv video will play.

  • We’ve set the video type to video/flv and the src path to Flv video path

  • Finally, please ensure that the dimensions of the video player are large enough, as most browsers will block the flash player if the size is less than 400x300. So, change the height and width of the video player to at least the dimension of the video. Just like we’ve set the height to 720 and width to 1280 in our example.

You might have noticed that we’ve used the <video> tags for creating the flv video player. Alternatively, <video-js> tag can also be used instead of <video> tag for creating a player.

Example

Consider the below example for creating an flv video player using the <video-js> tags −

<!DOCTYPE html>
<html>
<head>
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
</head>
<body>
   <video-js
      id="my-video"
      width="560"
      height="300"
      data-setup='{}'
      controls="true"
      autoplay="true"
      preload="auto">
   <source
         src="https://www.tutorialspoint.com/videos/sample720.flv"
         type="video/flv"
         id="my-flv-video"
      >
   </video>
   <script src="https://vjs.zencdn.net/7.19.2/video.min.js">
      const player = videojs('my-video');
   </script>
   <script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script>
</body>
</html>

In the above example, we’ve replace the <video class="video-js"> tag with video-js.

Again, for the FLV video, we’ve −

  • Imported the videojs-flash in the <script>>tags.

  • Changed the video mime type to ‘video/flv’

Note − To execute the above example, you will need to update the "src" value Inside the <source> tag, with the path of your FLV video files.

Conclusion

In this tutorial, we understood how to create a basic video player using video.js. Moving forward, we had a look at creating a video player for an FLV video and the changes required for the same with the help of two examples, the first one using <video> tag and <video-js> tag, respectively.

Updated on: 04-Apr-2023

1K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements