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

Due to the fact that the browser doesn't need to download any font files because it is already using one, utilizing the system font of a specific operating system by default can improve efficiency. But it is true of any web-safe typeface. System fonts have the advantage of matching the fonts that the current OS uses, making them visually pleasing. There are some fonts from the Microsoft list that are also compatible with Macintosh Systems. Those are Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Impact, Trebuchet, Verdana, Symbol, Webdings and Times New Roman The fonts ... Read More

In HTML5, Microdata are used to nest metadata inside of already existing web page content. With this approach, machine-readable data may be easily inserted into HTML documents with a clear parsing paradigm. By using microdata, we may create our own unique elements and begin incorporating unique attributes into our web pages. Microdata is made up of a collection of name-value pairs. Items are a collection of name-value pairs, and each name-value property is referred to as a property. Regular elements are used to represent items and properties. HTML5 Microdata Global Attribute The following five global properties are introduced by ... Read More