Archive | HTML

RSS feed for this section

Scraping web content by using YQL

The YQL (Yahoo! Query Language) platform enables you to query, filter, and combine data across the web through a single interface. It exposes a SQL-like syntax that is both familiar to developers and expressive enough for getting the right data. Read first: HTML XPath examples Demo web page 1: Example 1: raw XPath Result: Example […]

Read full story Comments { 0 }

HTML XPath examples

Here are some demo HTML: HTML 1: Example 1: raw XPath Example 2: find an element by ID Example 3: child of Element ID or Example 4: find element contains a part of text Example 5: find element whose container is match with a text or //h1[ text()=”Lorem ipsum dolor sit amet”] Example 6: find […]

Read full story Comments { 1 }

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 }

Video JS Resolutions: set default resolution

If you use the videojs plugin: Video JS Resolutions at http://vidcaster.github.io/video-js-resolutions/ Here the example code in <head> tag: in <body> tag How to set default resolution eg: 360 We use the attribute data-default of <source> tag

Read full story Comments { 0 }

Videojs: how to display full poster image

To display the poster image, we have three ways: Method 1: Use attribute poster in video tag: Method 2: With javascript use Method 3: put in data-setup attribute But the default of css: So, we see the result like the figure below To fix it, we add the css code: Done, the result we receive:

Read full story Comments { 0 }

Videojs: plugin download with resolution selector

HTML: CSS: JS: Download: videojs-dowload.js videojs-dowload.css Online demo: http://jsfiddle.net/sans_amour/up8vzu4s/4/ The callback function we can leave blank, the download link will same as the play link. With the callback function, we can modify the download link, like use shorten link (ouo.io, bc.vc, adf.ly…) In the future, we’ll write a tutorial for make shorten link with PHP. […]

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 }