Tag Archives | HTML5

PHP: how to use AJAX to upload file

We create a simple example to learn how to use AJAX to upload file. HTML Create simple form with a file input, we use accept attribute to validate image Javascript: PHP: file testuploadajaxdo.php We use folder products to store all uploaded images. Done 😀 Demo online: Demo upload ajax

Read full story Comments { 0 }

How to create a download button in Jwplayer

Step 1: First, we need to use a download image: here Step 2: Setup jwplayer HTML: JS: Step 3: add download button Here is the online demo: http://demo.tutorialspots.com/jwplayer/jw1.html But, if we use playerInstance.getPlaylistItem()[‘file’], we only download the first source file in the currently playing playlist. How to download the current video? Here is the solution: […]

Read full story Comments { 0 }
HTML5 audio Tag: use with javascript

HTML5 audio Tag: use with javascript

In the previous tutorial, we can know the audio file types which HTML audio tag supports and some attributes of the audio tag. We have many questions. First: how to detect which format the browser supports? We can use the library Modernizr to detect this. Example: Javascript (Note: use external resource: Modernizr) Result: http://jsfiddle.net/sans_amour/csxy3tLa/ Second […]

Read full story Comments { 0 }
HTML5 audio Tag: basic usage

HTML5 audio Tag: basic usage

With <audio> tag, you can play music or other audio streams. There are 3 supported file types: mp3, wav and ogg. Table 1: browser support file types (mp3, wav, ogg) Browser MP3 WAV OGG Table 2: version of browser support audio tag Browser Version support <audio> ≥4.0 ≥9.0 ≥3.5 ≥4.0 ≥10.5 Simple usage: If you […]

Read full story Comments { 0 }

HTML5 canvas: create animated character with sprite sheets

Today, we learn how to create animated character with sprite sheets, json and javascript. We use the below sprites sheet: Copyright: Mozilla & Github And json data: https://raw.githubusercontent.com/mozilla/BrowserQuest/master/client/sprites/clotharmor.json Copyright: Mozilla & Github First step: analysis the structure of the json file and the sprite sheets Seeing the json file, we can determine the size of […]

Read full story Comments { 0 }

HTML5 canvas: a circle follows the mouse

Read first: HTML5 canvas: Draw a circle move any direction HTML: CSS: Javascript: The result: Try it yourself: https://jsfiddle.net/eqc176y2/ We can use the script below to do the same: Try it yourself: https://jsfiddle.net/sans_amour/eqc176y2/2/ If you don’t want to move the circle out of the canvas, you can modify javascript code: Try it yourself: https://jsfiddle.net/eqc176y2/1/

Read full story Comments { 1 }

HTML5 canvas: Draw a circle move any direction

Read first: HTML5 canvas draw animated circle HTML: CSS: Javascript: Result: Try it Yourself: https://jsfiddle.net/qfs8entc/1/ In this tutorial, we can learn how to determine the text width in canvas by use measureText method. Read more: HTML5 canvas: a circle follows the mouse

Read full story Comments { 1 }

HTML5 canvas draw animated circle

HTML: CSS: Javascript: Result: Try it yourself: https://jsfiddle.net/gLx1a21f/ We can use the script below to do the same: Try it yourself: https://jsfiddle.net/8p5vtqg9/

Read full story Comments { 1 }

Introduction to HTML5 and CSS3

The site of the world is entering a new technology and new standards. So they started developing HTML5 and CSS3.I will briefly describe HTML5.

Read full story Comments { 0 }