html5

HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.

Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”

Custom Validation Messages for HTML5 Form Constraints

Well, we already know that with HTML5 from constraints, client side form validation has become super easy. All we have to do is use attributes like required, maxlength, pattern, step, etc. and/or the correct form type like email, phone, number, etc. and then once the user submits the form, the browser prompts invalid messages if the form is not entirely valid. Although it might not really be a requirement but from a coolness perspective I thought I’ll share the fact that the error messages can be customized.

Continue reading “Custom Validation Messages for HTML5 Form Constraints”

Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant action with the relevant GET/POST method specified (or defaults are used) or on submission of the form we use AJAX/XHR to send the form date to a specific URL with the required request type (GET, POST, PUT, UPDATE, DELETE, etc.). For a long time we had been implementing client side form validations in our JavaScript code (we still do) but then with the advent of the HTML5 constraint validation we have been doing a lot of the form validations right there in the form controls definitions by specifying the right type like email, phone, etc. with/without attributes like pattern, maxlength, required, steps, etc.

Continue reading “Trigger HTML5 Form Validation on JavaScript Submission (form.submit())”

Why clearRect Might Not be Clearing the Canvas Pixels

Sometimes the clearRect(x, y, width, height) method on the canvas context might not erase the previous graphics drawn. This usually happens when we’re drawing paths using methods like lineTo(), arc(), rect(), etc. and then stroking them with stroke() or filling their content area using fill(). Here’s an example of what I’m trying to convey.

Continue reading “Why clearRect Might Not be Clearing the Canvas Pixels”

Solve Your Game Audio Problems on iOS and Android with Web Audio API

So you made your game or some other app that has multiple sound effects produced by several audio files. It works great on your desktop, laptop, etc. browsers but then you realize that you have some major issues with multiple sounds (or even single) on mobile and tablet platforms like iOS and android browsers. Sad!

Continue reading “Solve Your Game Audio Problems on iOS and Android with Web Audio API”

Fixing HTML5 Audio Problems in iOS and Android Mobile Browsers to Overcome the Limitations

In one of my earlier posts I discussed some of the issues (or limitations) with HTML5 audio support in iOS and Android mobile and tablet platforms. In this article I am going to try to take a look at some of the ways we can overcome those limitations and quirks.

Continue reading “Fixing HTML5 Audio Problems in iOS and Android Mobile Browsers to Overcome the Limitations”

HTML5 Audio Behaviour and Support in iOS and Android

Few months back I was developing an HTML5 game where I really struggled with adding and playing the different sound/audio effects properly across different browsers and platforms, especially in mobiles and tablets. As I made some progress, I decided to document the support and behaviour of HTML5 Audio in mobile environments – iOS and Android – based on my trials.

Continue reading “HTML5 Audio Behaviour and Support in iOS and Android”