In this tutorial, we're going to learn how to add subtitles to a video using the video.js library. Subtitles, often known as captions, are lines of speech or other text that appear at the bottom of the video. Adding subtitles to the video really enhances the video experience for the viewers who are deaf or hard-of-hearing. Adding subtitles using video.js is very easy and furthermore, video.js allows crossbrowser implementation of the subtitle. Let's learn how to add subtitles to our video using video.js in the next section of the video. How to Add Subtitles in Video Using Video.js? Subtitles, also ... Read More

In this tutorial, we are going to learn how to set the duration of animation on a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to change the duration of animated text we use the duration property. Syntax animate(property: String | ... Read More

In this tutorial, we'll look at how to use video.js to create a responsive video player. A responsive video player is one that resizes itself to fit the size of the screen. By creating a responsive video player, we ensure that our video player is never cropped from the sides and is always presented fully, regardless of the device or screen size. Having a consistent player will also enhance the viewing experience of the end user. Let's move ahead to the next section of the article and learn how to make the video player responsive using video.js. Creating a Responsive ... Read More

The HTML element embeds a media player which supports video playback into the document. You can use for audio content as well, but the element may provide a more appropriate user experience. HTML5 tag is a fantastic addition. Instead of relying on a plugin like Flash, it makes it possible to playback video natively in all of the most recent browsers. It makes web video accessible to hardware that doesn't support Flash. Additionally, it makes codecs playable on the web that weren't before. Let’s jump into the article to discuss more about commonly used video formats ... Read More

The HTML5 canvas element enables dynamic, scriptable display of bitmap images and 2D forms. A bitmap is updated using a low level procedural model. 2D game development is also aided by HTML5 Canvas. The HTML element is used to draw graphics on a web page. Let’s dive into the article for learning more about creating text using HTML5 canvas. Create text using HTML5 Canvas Use the fillText() or strokeText() methods, or a mix of the two, to add text on the HTML "canvas" element. You can provide a variety of text settings, including style, weight, size, and font, using ... Read More

We received a greatness from HTML5. Basic HTML can now be used to carry out tasks that JavaScript and Flash previously handled, such as basic form validation, INPUT placeholders, and audio/video. The autofocus attribute in HTML allows us to automatically focus on components when the page loads, which is another straightforward feature. When the autofocus property is present, the page loads with the INPUT, TEXTAREA, or BUTTON element already chosen. This property is particularly helpful on pages whose primary goal is information gathering. Autofocus HTML5 attribute An element should be focused when the page loads or when the a ... Read More

The datetime-local input is different from the other one in that it excludes the time zone. Use datetime-local if your application doesn't care about the time zone. The datetime input type is still catching up with some browsers. Let’s look into further for getting better understanding between datetime and datetime-local in HTML5 HTML5 datetime The machine-readable date and time of the element is defined by the HTML datetime Attribute. The time and date are entered in the following format: YYYY-MM-DDThh:mm:ssTZD. Syntax Following is the syntax for HTML datetime Let’s look into the following example ... Read More

The tag designates a field for user-enterable data. The most significant form element is the element. Depending on the type attribute, the element can be presented in a number of different ways. The input element denotes a field for a week input because it has the value "week" in its type property. Instead of requiring users to input the value as a string, these fields could be represented in supporting browsers by controls that let users update it graphically (such as a calendar, for example). Let’s jump into the article to discuss more about input type week ... Read More

In HTML5 canvas, you can add shadows to shapes, lines, texts, and images to give them the appearance of depth. You can use the following canvas context attributes to add shadows when using the HTML5 canvas. shadowOffsetX() shadowOffsetY() shadowColor() shadowBlur() shadowOffsetX() The property can be used to get or set a shadow's horizontal distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value. Syntax Following is the syntax for shadowOffsetX() ctx.shadowOffsetX = h_distance; where h_distance belongs to the horizontal distance ... Read More

The bezierCurveTo() feature of HTML5 Canvas can be used to generate a Bezier curve. The context point, two control points, and an ending point are used to define Bezier curves. Bezier curves, in contrast to quadratic curves, are specified using two control points rather than one, allowing us to produce more intricate curves. The lineWidth, strokeStyle, and lineCap attributes can be used to customise the look of bezier curves. What are Bezier curves Bezier curves may have appeared in desktop publishing and graphics programs. Beziers offer a great deal more form control. Because the beginning of the curve follows its ... Read More