Geolocation - get the location of the user

Depending on the settings of your device asking for your location may not be possible or disabled for security reasons. When pushing the button for the first time you may be asked if you agree to accessing your location. Android smartphones may have to activate Einstellungen / Optionen Standortdienste / "Zugriff auf meinen Standort erlauben".

Audio - playing sound files

Use the standard control of your browser

Use your own controls

current loudness: 1.0 (range is 0.0 - 1.0)

Video - playing films on your web page

Use the new "video" element (HTML5)

Video 1: - External video from linked into video element.

Use the "iframe" element (HTML4)

Video 2: - External video from YouTube linked into iframe element.

How to embed a YouTube video directly into your web page:

Canvas - drawing from script

You can use Javascript to draw paths, rectangles, circles, text and insert pictures.


SVG (scalable vector graphics) - drawing from XML/HTML

Graphics are described directly as a structured svg element within HTML page. Each drawn shape is a DOM element which may be connected with appropriate event handlers. Resizing is possible without loss of quality. Svg also supports animation effects:

Hint: Clicking on the circle will change its color.
For more info on SVG see W3 schools

Input fields for forms

datetime (regular text field)
email verify correct email format
url verify correct url path
numberverify number is one of -5, 0, 5, 10, .. 25
range-525verify number is one of -5, 0, 5, 10, .. 25
search(regular text field)
tel(regular text field)
text placeholderplace holder text as info
text patternverify regular expression, here: 4 hex digits required
file multiplebrowse for multiple files
list list of predefined values, other input also allowed
output= number * range, (triggered by changes, see attribute oninput within form element)

Controlling behaviour:

SSE - Server-sent events

A webpage can receive notifications about new data from the server, no polling is required. The following example informs you about new "chat" messages received on a php server page. You can send new messages from here or from any other browser instance or computer.

Chat messages received from server:

A more elaborate but still simple chat application can be found here: Simple chat program based on SSE

For more infos see Server-sent events

Other topics