Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
4K+ Views
