Video.js is a library that lets you create a modern looking and advanced video player with support for all traditional video formats like mp4, Flv, etc. In addition, it also supports the latest video formats like YouTube, Vimeo, etc. In this tutorial, we're going to comprehend how to get the current playback time of a video player created using video.js. Video.js provides you the flexibility to control even the minute aspects of your video player without any hassle. So, for the purpose of this tutorial, we'll try to get the current playback time of a video player. Getting the current ... Read More

Video.js is a well-known online video player JavaScript toolkit that is used to create web browser video players for a range of video formats. Video.js is a very flexible and customizable library to create modern web video players. It supports a wide range of packages, plugins, and options. Using video.js, any part of an HTML video player can be configured as per your liking. For the purpose of this tutorial, we're going to create a video loop in a video.js player i.e., playing the video in a loop repeatedly. Usually looping, a video is done by playing the video again ... Read More

In this article, we will learn how to eliminate extra space before and after a form HTML element so as to ensure a clean and compact form layout. When designing web applications, it's essential to have control over the spacing and layout to create a visually pleasing and well-organized user interface. Sometimes, there is extra space available before and after a tag, which can affect the overall design and alignment of your form elements. Let’s understand how to remove the extra space with the help of some examples. Example 1 In this example, we will remove the extra space ... Read More

In this article, we will learn how to dynamically set the height and width of a div element using jQuery and its methods such as height() and width(). In web development, there are often scenarios where you need to dynamically adjust the height and width of a element based on certain conditions or user interactions. We can do this easily using jQuery, a popular JavaScript library. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will dynamically set the height and width of a div container, when the document is ... Read More

In this article, we will learn how to dynamically insert IDs into a table element using JavaScrip with the help of setAttribute API. In web development, dynamically inserting an ID into an HTML table element can be a useful technique when we need to uniquely identify and manipulate specific rows or cells. By assigning IDs to table elements programmatically, we gain more control and flexibility in accessing and modifying the table's content. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we generate a random id for a table row by computing ... Read More

In this article, we will explore how to dynamically get the content height of a HTML element using AngularJS, using its getContentHeight() function. In web development, there are often situations where we need to dynamically determine the height of a element based on its content. We can easily implement it with the help of AnguarlJS, a popular javascript framework, and the various utility functions provided by it. Let’s understand how to implement the above with the help of some examples. Example 1 In this example, we will add an ng-init="getContentHeight()" to the element, which calls the getContentHeight() ... Read More

In this article, we will learn how to dynamically create new elements in JavaScript with the help of the createElement browser API. Dynamic element creation in JavaScript allows you to generate new HTML elements on the get-go. Whether you need to add content to a web page based on user interactions or dynamically generate elements for a specific task, it can help enhance the flexibility and interactivity of web applications. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will have a button element and on clicking it, we ... Read More

In this article, we will learn how to dynamically add or remove table rows using jQuery, a popular JavaScript library, with the help of the click event listeners. Tables are a commonly used element in web development, especially when dealing with tabular data or dynamic content. Adding or removing table rows dynamically can be a powerful feature that allows users to interact with the data in real time. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will have an HTML table element with some row data in it. ... Read More

In this article, we will learn how to draw smooth a curve through multiple points using JavaScript with the help of canvas browser API and HTML element. When it comes to visualizing data or creating interactive graphics on the web, drawing smooth curves through multiple points can greatly enhance the aesthetics and readability of the information. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will leverage the concept of Brazier Curves which are defined by a set of control points to draw a smooth curve passing through them. We will ... Read More

In this article, we will learn how to display a warning message before leaving the web page with unsaved changes using javascript with the help of the “beforeunload” event listener. When working on web applications or forms of any kind, it becomes necessary to provide a warning message to users before they leave a page with unsaved changes. This can prevent accidental data loss and improve the overall user experience. Let’s understand how we can implement this with the help of some examples − Example 1 In this example, we will have a form with multiple input elements and ... Read More