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 Vimeo files using Video.js player?
In this article, we’re going to learn how to play Vimeo video files using the video.js player. Video.js is an easy-to-use and very popular modern video player which has the support of all the latest video formats including Vimeo, youtube etc across a variety of platforms like desktops, laptops, etc.
Now, let’s focus on creating a video player which will play our Vimeo files, by making use of the ‘videojs-vimeo’ package. This package will help us to play Vimeo video files, without much hassle.
How to play Vimeo files using Video.js player?
For playing our Vimeo videos in the video.js player, we need to install a package called ‘videojs-vimeo in our project. Installation of the package is straightforward and can be done using the yarn or node package manager.
Installing video.js Vimeo package
Consider the below command for installation of ‘videojs-vimeo using npm −
npm install @devmobiliza/videojs-vimeo
If you are using yarn as the package manager of your choice, then the package can be installed using the following command
yarn add @devmobiliza/videojs-vimeo
You just need to execute the above command in terminal of your project directory to install the package. Now to use the same in our code, we need to add the path to the dist file of the package in the <script> tag. Use the below code excerpt for adding video.js Vimeo package.
<script src="videojs-vimeo/dist/videojs-vimeo.js"></script>
Make sure to update the path of the package correctly to add video.js-vimeo in your project.
Since, we’ve included the vimeo package in our project, let’s use it to create our video player
.Playing Vimeo Videos using the Video.js Vimeo Package −
For playing vimeo video in our video.js player, we need to create a simple player and pass some option in data setup attribute. The video options that we need to pass in ‘data-setup’ are as follows −
set the techOrder option in data-setup as vimeo.
pass the sources array, with the video URLs and their mime type as ‘video/vimeo in data-setup as parameters.
Consider the below code for adding a video element with vimeo video file −
HTML CODE
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' >
As you can observe, in the code snippet, we’ve set the tech order as vimeo and passed the sources array which contains the url to an HTML Video. Please notice that the sources tag contains an array of JSON objects where each object has the type and URL of the video that we want to play. We can add multiple JSON objects for multiple videos. Also, make sure to add the type of video is ‘video/vimeo.
Note − We’ve removed the <source> tag which we used to add a video file in the <video> element. Instead we’ve added the sources array in the data-setup options.
So, the fully working example of including the video.js vimeo plugin and playing a vimeo video file in the video player will look something like this.
Example
<html> <head> <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-default-skin" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
Note − Please update the correct path of the videojs-vimeo.js file in the ‘src’ attribute of the <script> tag.
The execution of above code is going to create a video player in you web browser and the video being played will be a HTML vimeo video with the following URL − https://www.vimeo.com/380886323
Now, we’ve created a video player which plays vimeo videos, we can also set additional parameters on the vimeo video player like color, quality, loop, autoplay, muted etc.
For example, if we need to change the color of the player as red and loop the video, we can do so by
data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }'
The complete working example of youtube video player using color as red and video loop set as true, will look something like this.
Example
<html> <head> <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-default-skin" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/my_video_poster.jpg" data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
Execution the above example is going to create a vimeo video player with changed color and the video will keep running on loop. Alternatively, you can use any video.js option with the video.js vimeo package.
Conclusion
In this article, we understood how to play vimeo videos using video.js. First, we imported the video.js vimeo plugin, which is responsible for playing vimeo videos in our video player. Later, we learned how to change the color of video player and then playing the video on loop, with the help of an example.
1K+ Views
