Teach with us

Setting up a Poster for a Video in Video.js Player

In this tutorial, we're going to learn how to set up a poster image for a video player created using video.js. Video.js is a very popular and well-known open-source HTML video player framework. It supports a lot of video formats, from standard video formats like mp4, WebM, Flv, etc to other modern video playback formats like YouTube, Vimeo, twitch, etc. Video.js is so widely accepted because of the flexibility, customizations, and support it provides while creating a video player.

For the purpose of this tutorial, we're going to change the look of our video player by adding a poster image for our video. A poster image is an image file that is displayed when the webpage is loaded and the end-user has not played the video. The poster image can be really beneficial as it can portray what the video is about, it can also act as a thumbnail to the video and hence appealing the end user to play the video. So, the video poster image has many applications. Now let's move on to the next section of this article and understand how we can add a poster image to our videos using video.js.

Setting up a Poster for a Video in Video.js Player

For displaying a poster image on the video player, we're going to make use of the 'poster' option method provided by video.js. This method accepts an image path as a value and shows the image passed a poster of our video. This option supports source images in widely accepted image formats like png, jpg, etc.

'poster' attribute can be used by two different methods.

  • Using 'data-setup' with the <video> tag

  • Setting poster dynamically using js

Let's quickly have a look at both of these methods.

Setting the Poster using the 'data-setup' Attribute

Prerequisite − Assuming that you know how to create a basic video player using the video.js library.

For adding a video poster image to our video, we need to pass 'poster' options with the path to an image file inside the 'data-setup attribute' to the <video> tag. Consider the following code excerpt for achieving the same.

<video
   id="my-video"
   class="video-js vjs-default-skin vjs-big-play-centered"
   controls="true"
   muted="true"
   preload="auto"
   width="560"
   height="340"
   data-setup='{ "poster": "assets/sample.png" }'
>

In the above code snippet, we've added a PNG image file as the poster in the 'datasetup' attribute of our <video> element. Please make sure the source path of the image file is correct as per your local directory.

Example 1

The complete video player example with a poster image will look something like this −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Video Poster Image Tutorial</title>
   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
   <video
      id="my-video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      muted="true"
      preload="auto"
      width="560"
      height="340"
      data-setup='{ "poster":
      "https://www.tutorialspoint.com/videos/sample.png" }'
   >
      <source
         src="https://www.tutorialspoint.com/videos/sample720.mp4"
         type="video/mp4"
      >
      </video>
      <script>
         // Initializing the video player with video options
         var player = videojs('my-video');
      </script>
</body>
</html>

In the above code, we've done the following −

  • First, we've imported video.js CSS and JS file using the CDN URL in the <head> tag.

  • Next, inside the <body> tag we've created a <video> element with class=”video.js vjs-default-skin vjs-big-play-centered” and 'id' as 'my-video'. We've used this id in the <script> tag below to reference the player. Some standard HTML video options like controls, muted, width, and height have also been included in the <video> tag.

  • Inside the 'data-setup' attribute of the <video> tag, we've passed the poster image which is going to be displayed on our video.

If we execute the above code, it will create a video player which will display the poster image which we passed in the 'data-setup' attribute. The poster image will not be displayed after the video has been played. It is only shown till we've not clicked the play button of our video or till our video is not played. So, please make sure the 'autoplay' attribute is set to False for such videos.

Now that we've learned how to set up a poster image for a video in the video.js player, we can move forward to understand the second method of invoking the poster image method dynamically using JavaScript.

Setting Poster Dynamically with Video Options using JavaScript

In this section of the tutorial, we'll see set the poster image dynamically using JavaScript. The slight advantage this method has over the previous method is that everything is handled in the JavaScript (<script> tag) part of the HTML code which makes the code more readable and manageable. Also, using this one gives you more control over the video player.

To display a poster image for our video player in JavaScript, first, we need to create a JS object containing the poster attribute with the source path to the image file and then pass it to the video.js player reference.

Consider the following code snippet for adding a poster to our video player dynamically using JavaScript.

<script>
   // Setting up poster image with video options
   let videoOptions = {
      "poster": "assets/sample.png"
   }
   
   // Initializing the video player with video options
   var player = videojs('my-video', videoOptions);
</script>

In the above snippet, we added poster image with path to a sample PNG file and passed it to the initialization of our video player reference which has an id as 'myvideo' in.

Example 2

Adding the above code excerpt to the complete example will make the code look like this −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Video Poster Image Tutorial</title>
   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
   <video
      id="my-video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      muted="true"
      preload="auto"
      width="560"
      height="340"
      data-setup='{}'
   >
      <source
         src=" https://www.tutorialspoint.com/videos/sample720.mp4"
         type="video/mp4"
      >
   </video>
   <script>
      // Setting up poster image with video options
      let videoOptions = {
         "poster": " https://www.tutorialspoint.com/videos/sample.png"
      }
      // Initializing the video player with video options
      var player = videojs('my-video', videoOptions);
   </script>
</body>
</html>

If you'll notice the above example carefully, we've removed poster image option from the 'data-setup' attribute in the <video> tag. Instead, we've added the sample PNG image as a poster to our video, dynamically in the <script> tag.

However, when you execute the above code in a web browser, the same video player will be created as the example above. It will have the same image poster and this image poster will be shown only until the video is played.

So, we can any of the above methods to create a video player with a poster image using video.js.

Additionally, video.js also lets you control the CSS of the poster image using the '.vjs-poster' class in the <style> tags. For example: if you want to make the background size of the poster image 100% so that it fills the entire video and there are no black areas, you can do so by using the below code inside the <head> tag.

<!-- CSS for Poster Image -->
<style>
   .vjs-poster{
      background-size: 100% !important;
   }
</style>

Using the above code in our example is going to make the display image as 100%. So, you can use any of the CSS image properties on the '.vjs-poster' class to customize the poster image.

Example 3

Adding the CSS in the above example will make the example look like this −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Speed Up/Down Video Tutorial</title>
   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
   <!-- CSS for Poster Image -->
   <style>
      .vjs-poster{
         background-size: 100% !important;
      }
   </style>
</head>
<body>
   <video id="my-video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      muted="true"
      preload="auto"
      width="560"
      height="340"
      data-setup='{}'
   >
      <source
         src=" https://www.tutorialspoint.com/videos/sample720.mp4"
         type="video/mp4"
      >
   </video>
   <script>
      // Setting up poster image with video options
      let videoOptions = {
         "poster": "https://www.tutorialspoint.com/videos/sample.png"
      }
      // Initializing the video player with video options
      var player = videojs('my-video', videoOptions);
   </script>
</body>
</html>

The execution of above code will create a video player with poster image which has been filled to cover the 100% of the screen.

Conclusion

In this tutorial, we understood how to set up a poster image for a video created using the video.js player. We added the poster image to our video using two methods and then understood how to change the CSS of the display image using the '.vjs-poster' class with the help of a few examples.

Updated on 08-Dec-2022 07:19:25

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements