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 set up a video.js player in Android?
In this tutorial, we're going to learn how to set up a video.js player on an android device. Video.js is a web video player library that is utilized for creating modern-looking video players. One of the great things about video.js is that it supports a wide range of display sizes like desktops, laptops, mobiles, etc. Also, it supports a plethora of video formats be it standard or modern like mp4, Flv, YouTube, etc.
For the purpose of this tutorial, we're going to learn how to set up a video.js player on an android device. Sometimes the video player created using video.js don't work properly on the android phone or sometimes the video.js controls don't show up on an android device. Now, let's move on to the next section of this tutorial to understand how to set up a video player properly in android using video.js.
Setting up a Video.js Player in Android
Android is a very popular and open-source, mobile operating system that has been based on a modified version of the Linux kernel. It is primarily made for mobile devices with touch screens, like smartphones and tablets. Android has been the best-selling operating system since 2011 with a monthly active user base of over 3 Billion users.
Video players created using video.js work fine in an android web browser or apps without much hassle. But sometimes the video.js player custom controls don't show up on mobile devices and the native android controls take over.
While setting up a video player in Android using video.js, we need to make sure that the custom video.js controls are shown and not the native android controls. For that, we've two methods −
Setting Custom Android Controls using the 'data-setup' attribute
Setting Custom Android Controls dynamically using JS
Let's dive in to understand each of these methods −
Setting Custom Android Controls Using the 'Data-setup' Attribute
Prerequisite − Assuming that you know how to create a basic video player using the video.js library.
For setting the custom control on mobile devices we need to set the 'customControlsOnMobile' option reference as true in the 'video' tag of our video using the 'data-setup' attribute.
Also, we need to ensure that the native android or mobile controls for the touchscreen devices don't show up in place of our custom video.js controls. So, for disabling the native touch controls for mobile, we're going to the "nativeControlsForTouch" option reference as false, again in the 'data-setup' attribute of the <video> element.
Consider the following code snippet for setting up a video player in Android with custom video.js controls −
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
In the code excerpt above, we've used the "customControlsOnMobile" and "nativeControlsForTouch" option references in the 'data-setup' attribute of our <video> element. The value of the "customControlsOnMobile" option has been set to true to make sure that our custom video.js control is displayed even on a mobile display, while the "nativeControlsForTouch" option has been set to false so the native android controls don't take over our video player.
Note − Since the data-setup attribute accepts a JSON object, please make sure you're passing a valid JSON string inside the data-setup attribute, or else the code will not execute properly.
Example 1
The complete example for setting up a video.js player in Android with custom video.js controls −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Player in Android Example</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster=" https://www.tutorialspoint.com/videos/sample.png"
data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
const player = videojs('my-video-player');
</script>
</body>
</html>
In this code example, we've implemented the following −
First, we've used the free CDN URL of video.js to import the required CSS and JS files of video.js in the <head> section of the code.
Further, we've created a <video> element inside the <body> section of our code. The <video> element has been initialized with classes like video.js, video-default-skin, and vjs-big-play-centered.
The 'id' of the video element i.e. 'my-video-player' has been later used in the <script> section of the code to create a video player for this id.
We've also utilized some standard HTML video options like controls, muted, and poster for the <video> element and fluid attribute has been used to make the video player responsive.
For the source, we've used an mp4 video, for which we've mentioned the mime type as video/mp4 in the source tag.
In the <script> tag, the video player has been initialized for <video> element having id as 'my-video-player'
Inside the 'data-setup' attribute of the <video> tag, we've set the "customControlsOnMobile" option as true and "nativeControlsForTouch" option reference value as false.
When the execution of the above code takes place in an android browser, a video.js player is created and it will have custom video.js controls.
So, we learned the first method to create a video player in android using video.js controls, let's move on to the subsequent section of the tutorial to understand another method for achieving the same.
Setting Custom Android Controls Dynamically Using JS
In this section of the tutorial, we'll learn how to dynamically enable the custom control for mobile and disable the native touch controls on an android video player using video.js.
First, we need to create a JSON object in JavaScript which will contain the value of 'nativeControlsForTouch' as false (Boolean) and customControlsOnMobile as true (Boolean), and then we're going to pass this object to the video.js player reference.
Consider the following code snippet for creating a video.js player in android with custom video.js controls dynamically −
<script>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
const player = videojs('my-video-player', videoOptions);
</script>
In this piece of code, we are disabling the native android touch controls by setting the value of “nativeControlsForTouch” as false, meanwhile enabling the custom video.js controls on mobile by setting "customControlsOnMobile" as true. Later, we passed the video options to the initialization of our video player reference which has an id as 'my-video-player'.
This is another way to set up a video.js player properly for a device with the android operating system.
Example 2
Using the above code in a complete example to set up a video.js player in android with custom control will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Player in Android Example</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster=" https://www.tutorialspoint.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
const player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
In this example, we've set the 'customControlsOnMobile' property to true and 'nativeControlsForTouch' as false dynamically using javascript in the <script> tag and if you notice carefully, all the options reference from the 'data-setup' attribute of the <video> tag have been removed.
However, when the above code is executed in the android mobile web browser, you'll notice that the video player was created properly and it will have custom video.js controls instead of the native android controls.
Conclusion
In this tutorial, we understood how to set up a video.js player on an android device. We looked at the two available methods for enabling the custom video.js controls in an android video player and disabling the native android controls so that they don't override the vidoe.js controls. We also saw one fully working example for each of the above methods.
420 Views
