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 QuickTime MOV files using the Video.js player?
Video.js is an open-source, HTML5 web video player. It supports a variety of HTML5 media source extensions along with modern video playback technologies like YouTube, HLS Stream, etc. through plugins. Video.js supports video playback on a range of display sizes with a plethora of devices like desktops and mobile devices.
In this tutorial, we're going to learn how to play the QuickTime MOV files using in our web browser using video.js. MOV is a very common video container used in Apple's QuickTime player for storing movies and video files. These containers use a compression algorithm designed by Apple Computer and these are compatible with both Windows and Mac devices. MOV (QuickTime Container File Type) containers may hold several video data formats such as MPEG-4 and OGG.
Now that we understand video.js and MOV file types, let's start with creating a video player to play the MOV Files, in the next section of this article.
How to play QuickTime MOV files using the Video.js player?
For playing a QuickTime MOV file using video.js, we need to create a video player and then pass the source to our MOV file.
Let's start creating a video player. To create a video player, you can use both, either a <video> tag with class="video-js" or directly the <video-js> tag. We're going to have a look at both of them one by one.
<video> tag with video.js class
Example
Consider the following example to create a video player to play a QuickTime MOV video using the video.js class −
<!DOCTYPE html> <html> <head> <!-- Importing Video.js CSS using 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-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" height="264" width="560" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{}' > <!-- Source the QuickTime MOV File --> <source src="https://www.tutorialspoint.com/videos/sample.mov" type="video/mp4" > </video> <!-- Importing Video.js using url --> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <!--Creating video player reference using video.js interface--> <script> var player = videojs('my-video'); </script> </body> </html>
In the above code example, we've done the following −
Imported Video.js CSS and JS using the CDN URL in the <link> and <script> tags respectively.
Created a video element using <video> tag with the class as 'video-js' and a custom vjs skin called 'vjs-theme-sea'. We've also included some standard HTML5 video options like controls, preload, height, and width and some video.js specific options like fluid, and data-setup.
Notice the attribute 'data-setup' on the video element. This attribute is very important tells video.js to load the video element after the webpage is loaded.
In the source tag we've added the source to the QuickTime MOV file, which needs to be played in the video player. Also, the video mime type for a MOV file will be the same as mp4 video, i.e., "video/mp4".
When you execute the above code, a video player which will play the ".MOV" video file with video.js controls.
Now, we've seen one way of creating a QuickTime MOV video player. Let's have a look at the other method in the next section of the video.
Using the <video-js> tag
Example
In this section, instead of using the <video> tag, we're going to use the <video-js> tag directly. It is also the recommended method to use video.js.
Updating the above example with <video-js> tag. Consider the HTML Code shown below −
<!DOCTYPE html> <html> <head> <!-- Importing Video.js CSS using url --> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-video" class="vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" height="264" width="560" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{}' > <!-- Source the QuickTime MOV File --> <source src="https://www.tutorialspoint.com/videos/sample.mov" type="video/mp4" > </video-js> <!-- Importing Video.js using url --> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <!--Creating video player reference using video.js interface--> <script> var player = videojs('my-video'); </script> </body> </html>
In the above example, we've replaced the <video>>tag with <video-js> tag. Also notice that we've removed the 'video-js' class from the class attribute on the <video> element. Apart from this, no change has been done to the above example but when you will run both the codes in your browser, you'll notice no difference between the two examples.
Note − To run the above example in your project, you will need to update the "src" value inside the <source> tag, with the path of your MOV files.
Conclusion
In this tutorial, we had a quick overview of video.js and QuickTime MOV container files. Later, we used video.js to create to play MOV video player first with the <video> tag and then with the <video-js> tag. We also had a look at working examples of each of the methods.
3K+ Views
