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
Video.js Player Method / Options References
In this tutorial, we’re going to go through some of the basic options references of video.js. Option References are like settings to control or modify the behavior of a video player.
These options can be both − HTML5 options like autoplay, reload, etc., and video-js specific settings. We’re going to have a look at each of these alternatives.
Standard HTML5 <video> Element Options
Standard HTML5 <video> Element Options are standard settings which work both with <video> tag and <video-js> tag. With the help of these options, you can change the video player’s height, width, controls, etc.
Let’s discuss some of the most common standard HTML5 Video options −
Autoplay
Usage − attribute − the video will start playing as soon as the HTML page is loaded.
Type − Boolean
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video autoplay muted src="https://www.tutorialspoint.com/videos/myVideo.mp4"> </video> <video-js autoplay muted src="https://www.tutorialspoint.com/videos/myVideo.mp4" data-setup='{}'> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
In the above snippet, you can see both the ways to use the autoplay attribute, with the <video> element tag and with the <video-js> tag.
Note − Please make sure the src to video is the path to your video file.
Controls
Usage − The "controls" attribute lets you add buttons or controls like play, and pause on the video player. Without the controls attribute − the video can only be played using the autoplay attribute.
Type − Boolean
<video controls src="https://www.tutorialspoint.com/videos/myVideo.mp4"></video>
<video-js controls src="https://www.tutorialspoint.com/videos/myVideo.mp4" data-setup='{}'></video-js>
In the above piece of code, controls attribute has been added to both <video> and <video-js> tag.
Height and Width
Usage − As the name suggests height and width tags let you change the height and width of your video player respectively.
Type − string or number
<video controls width="320" height="240" src="myVideo.mp4"></video>
<video-js controls width="320" height="240" src="myVideo.mp4" datasetup='{}'></video-js>
As you can see in the above snippet − we’ve added a height of 240 pixels and width of 320 pixels to both the video elements.
So, these were some of the common and most-used standard HTML video elements options. In the next section, we’ll see some video-js specifics settings.
Video.js Element Specific Options
Video.js specific options work only with the <video-js> tag and don’t work with the standard <video> tag. The value of each of these settings is set to undefined by default, unless specified.
Let’s see some of the video.js element-specific options −
aspectRatio
Usage− This option makes the video player more fluid and the value of aspectRatio parameter is used for calculating the size of the player dynamically. The value of aspectRatio should be a ratio with two numbers separated by a colon. Ex: "21:9"
Type− string
<video-js aspectRatio="21:9" src="myVideo.mp4" data-setup='{}'></video-js>
In the above excerpt, aspectRatio has been set to 21:9. Apart from this, classes "vjs- 21-9" can also be used for achieving the same.
<video-js class="vjs-21-9" src="myVideo.mp4" data-setup='{}'></video-js>
audioOnlyMode
Usage − When set to true, all player components except the control bar are hidden, as well as control bar components required exclusively for video.
Type − Boolean (true/false)
<video-js aspectRatio="21:9" audioOnlyMode="true" src="myVideo.mp4" datasetup='{}'></video-js>
In the above code, audioOnlyMode attribute has been set to true. This is going to hide all the video player components for the video.
Fluid
Usage − To make a video player fluid, this option should be set to true. It is going to scale the video player size to fit the internal aspect ratio of the video or to the specified ratio.
Type − Boolean
<video-js aspectRatio="21:9" fluid="true" src="myVideo.mp4" datasetup='{}'></video-js>
In the above example, the video player size will scale to fit the given aspect ratio i.e. 21:9. If the aspect ratio would not have been provided, fluid attribute will set to video’s intrinsic ratio.
playbackRates
Usage − playbackRates allows you to show controls that let the user control the playback speed of a video. The value of the playback rates has to be an array strictly greater than 1. Playback value ‘1’ means regular speed, while ‘2’ means double the speed of the video and so on. The playback rates are shown in the bottom to the top order.
Type − array
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls id="myVideo" data-setup='{"playbackRates": [0.5, 1,1.5, 2, 3]}'> <source src="https://www.tutorialspoint.com/videos/video1.mp4/sample720.mp4" > </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
In this snippet, we’ve added playback rates to the video player options in data-setup. So, the playback speed controller will show 0.5, 1, 1.5, 2, and 3 as the playback rates.
userActions
Usage− userActions has a variety of functions to change how a user interacts with the video player.
Type− Object
userAction.click− This is a Boolean or function type option that controls the behavior of a user clicking on the player. If the value of this option is set to false − it will not allow the user to toggle between paused and playing.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js autoplay muted aspectRatio="21:9" fluid="true" id="myVideo"data-setup='{}'> <source src="https://www.tutorialspoint.com/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"click": false }});</script> </body> </html>
In this above snippet, userActions.click has been used and its value has been set to value for a video player with id as "myVideo"
Clicking and play/pause toggle is enabled if the value of "userActions.click" is set to undefined or true.
userAction.doubleClick− doubleClick is also a Boolean and function type option that controls the doubling clicking action on a video.
Double-clicking on a video is set not allowed if the value of this option is set to false. If its value is true or undefined − double clicking is allowed and it toggles the full-screen mode. Default full-screen toggle action can also be overridden by using the click handler function.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls autoplay muted aspectRatio="21:9" fluid="true" id="myVideo" data-setup='{}'> <source src="https://www.tutorialspoint.com/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"doubleClick": true }}); </script> </body> </html>
In the above code, "userActions.doubleClick" has been set to true, for a video player with id and "myVideo". It will enable double-clicking on a video and the video will be set to full-screen mode.
Conclusion
In this tutorial, we learned about some of the method references or option references of the video.js library. We had a look at some of the standard HTML5 options, which are used both with <video> and <video-js>. Later, we saw some of the video.js specific settings which only work with <video-js> tag and let you control the behavior and action of a video player further.
646 Views
