Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Chandu yadav
Page 20 of 81
HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?
The HTML5 video tag's currentTime property may not work properly in Chrome when your web server doesn't support HTTP range requests (byte-range serving). Chrome requires this feature for video seeking functionality. The Problem When you set currentTime on a video element, Chrome needs to jump to that specific time position in the video file. Without range request support, the browser cannot efficiently seek to arbitrary positions, causing currentTime to be ignored. Testing Your Web Server Check if your server supports byte-range requests using curl: curl --dump-header - -r0-0 http://yourserver.com/video.mp4 Look for this ...
Read MoreHTML5 video full preload in JavaScript
The oncanplaythrough event fires when the browser estimates it can play the video through to the end without stopping for buffering. This is useful for ensuring full video preload before playback. Understanding canplaythrough Event The canplaythrough event indicates the browser has buffered enough data to play the entire video without interruption. This differs from canplay, which only ensures playback can start. Example: Basic Video Preload Detection Video Preload Example ...
Read MoreDoes HTML5 Canvas support Double Buffering?
HTML5 Canvas doesn't have built-in double buffering, but you can implement it manually by creating a second off-screen canvas. This technique prevents flickering during complex animations by drawing to a hidden canvas first, then copying the complete frame to the visible canvas. What is Double Buffering? Double buffering uses two canvases: a visible "front buffer" and an invisible "back buffer". You draw your entire frame on the back buffer, then copy it to the front buffer in one operation. This eliminates the visual artifacts that occur when drawing directly to the visible canvas. Implementation Create an ...
Read MoreHow to stream large .mp4 files in HTML5?
Streaming large MP4 files in HTML5 requires proper video encoding and server configuration to enable progressive download while the video plays. Video Encoding Requirements For HTML5 streaming, MP4 files need special encoding where metadata is moved to the beginning of the file. This allows browsers to start playback before the entire file downloads. Using mp4FastStart The mp4FastStart tool relocates metadata to enable streaming: // Command line usage mp4faststart input.mp4 output.mp4 Using HandBrake HandBrake video encoder includes a "Web Optimized" option that automatically prepares MP4 files for streaming by moving the metadata ...
Read MoreHow can I add video to site background in HTML 5?
HTML5's element allows you to create stunning background videos that automatically play and loop behind your content. This technique is commonly used for modern, engaging websites. HTML Structure The basic HTML structure requires a video element with specific attributes for background functionality: #myVideo { position: fixed; right: 0; ...
Read MoreSet heights and widths of forms with Bootstrap
Bootstrap provides classes to control form element heights and widths. Use .input-lg, .input-sm for height sizing, and grid classes like .col-lg-* for width control. Height Sizing Classes Bootstrap offers three height sizes for form controls: .input-lg - Large height input Default - Standard height (no class needed) .input-sm - Small height input Width Control with Grid System Use Bootstrap's grid classes to control form element widths. Wrap inputs in .row and use column classes like .col-lg-2, .col-lg-3, etc. Example Here's how to implement different form sizes: ...
Read MoreFlexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items. When creating full-height applications with scrollable content areas, proper flexbox configuration is essential. Basic Flexbox Scroll Setup To create a scrollable flex item that takes up remaining space, use flex: 1 1 auto with overflow-y: auto: #container { display: flex; flex-direction: column; height: 100vh; } #container article { flex: 1 1 auto; ...
Read MoreCSS top property with Animation
The CSS top property specifies the vertical position of a positioned element. When combined with CSS animations, you can create smooth movement effects by animating changes to the top value over time. Syntax selector { top: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { top: value; } } Example: Animating Top Property The following example demonstrates how to animate the top property to create a ...
Read MoreAnimate CSS padding-left property
The CSS padding-left property can be animated to create smooth transitions that change the left padding of an element over time. This creates a visual effect where content moves horizontally as the padding increases or decreases. Syntax selector { animation: animation-name duration timing-function; } @keyframes animation-name { from { padding-left: initial-value; } to { padding-left: final-value; } } Example The following example animates the padding-left property from 0px to 50px and back − ...
Read MorePerform Animation on CSS min-width
The CSS min-width property can be animated to create dynamic width transitions. This property sets the minimum width of an element, and when animated, it smoothly transitions between different minimum width values. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { min-width: value; } } Example: Animating min-width Property The following example demonstrates how to animate the min-width property using CSS keyframes − ...
Read More