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
How to Play .mp4 file using Video.js Player?
In this tutorial, we're going to learn how to play an mp4 file using the video.js player library.
Video.js is a very popular and modern web video player which has been developed keeping the HTML5 world in mind. It supports a wide range of video playback formats like mp4, webm, flv, etc., and other modern video formats also like YouTube, Vimeo, and Flash. Video.js also makes sure that the video player is consistent across all display sizes like desktop, computer, and mobiles.
In this tutorial specifically, we'll have a look at creating a video player for our mp4 video files and how to use video.js for the same.
How to play .mp4 file using Video.js player?
In this section of the tutorial, let's create a video player for playing the mp4 video file. Using video.js it becomes very easy to play our mp4 video file. All we need to do is created a video element using video-js and add our video in the source tag with the correct video type.
To create a video player, there are majorly two methods −
Creating a video element using the <video> tag with the class as 'video-js'
Creating a video element using the <video-js> tag
Let's have a look at each one of these methods.
Using the <video> tag with class as 'video-js'
Example
Take a look at the following example −
<html> <head> <!-- Imported Video.js CSS using the URL --> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <!-- Imported Video.js using the CDN URL --> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> </body> </html>
In the above example, you can see that we've done the following −
Imported "video.js" using the CDN URL in the <script> and video-js.css in the <link> tag in the heads sections.
Created an <video> element with class name as "video-js" and id as "myvideo". We've also used some standard HTML video properties like controls, preload, height, width, etc., with some video-js specific properties like 'datasetup'
Inside the video element, is our <source> tag which has the path to our mp4 video files, and the mime type property on the <source> tag has been set to video/mp4. Adding "video/mp4" type is very important as this is going to tell the video player that the type of our video is mp4.
On executing the above code in your browser, a video player will be created with the video-js default skin, which is going to play our mp4 video file included in the source path.
Now that, we've created a video.js player to play our mp4 file using the <video> tag, let's also have a look at the <video-js> tag.
Using the <video-js> tag
Alternatively, you can use the <video-js> tag instead of using a <video> tag and then setting the class as "video-js".
Example
Consider the following code example for using the <video-js> tag to create an mp4 video player.
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-video" class="vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video-js> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> </body> </html>
In the above example, you'll notice that the code is almost the same as previous example. Here again, we've imported video.js using the CDN URL in the <script> tag and video.js CSS is imported in the <link> tag inside the head section.
Later, for creating a video element, we replaced the <video> tag with the <video-js> tag and we also removed the 'video-js' class from the video element also. Then again, some standard HTML5 properties have been set to the video element like controls, height, width, etc.
Also, observe how we've set the path to the mp4 video in the <source> tag and the mime type to 'video/mp4'. Setting the type of the source tag is very important as it updates video-js about the type of our video file.
However, when you'll execute this example in the browser, you'll notice that this one is also exactly the same as the previous one and there is no visible difference between the two. This one is also going to create a video player which is going to play our mp4 video file with video default skin.
So, we can use any of the methods explained above as it is not going to change anything. There are just two ways to create a video player to play our mp4 video file using the video.js library.
Note − To run the above code, you will need to update the "src" value Inside the <source> tag, with the path of your mp4 video file
Conclusion
In this tutorial, we learned to create a video player to play our mp4 video files using the video.js library. We first understood how to use the <video> element with "videojs" class with the assistance of a few examples and later we had a look at another method of creating a video player to play an mp4 video file, i.e. using the <video-js> tag.
3K+ Views
