Archive | HTML

RSS feed for this section

Scraping web content by using YQL

By on December 14, 2016 in HTML

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

By on December 14, 2016 in HTML

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

By on May 26, 2016 in HTML, JS, PHP

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

By on March 20, 2016 in HTML, JS

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

By on December 6, 2015 in HTML, JS

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

By on November 27, 2015 in CSS, HTML, JS

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

By on November 22, 2015 in HTML, JS

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

By on September 15, 2015 in HTML, JS

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

By on September 15, 2015 in HTML

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

By on September 2, 2015 in HTML, JS

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 }