HTML5

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 techslides.com 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:

Search an existing video or upload your own video to YouTube
Select share function for the video at YouTube and extract the key number from the displayed link info
Add this key number to the link within the iframe element and add prefix "http:/youtube.com/embed/"

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

color
date
time
month
week
datetime-local
datetime		(regular text field)
email		verify correct email format
url		verify correct url path
number		verify number is one of -5, 0, 5, 10, .. 25
range	-525	verify number is one of -5, 0, 5, 10, .. 25
search		(regular text field)
tel		(regular text field)
text placeholder		place holder text as info
text pattern		verify regular expression, here: 4 hex digits required
file multiple		browse 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:

Validation can be deactivated by using attribute "novalidate" within form element.
Specifying autocomplete="true" within form element activates auto completion feature for most input elements. In addition this feature can individually be activated / deactivated for each single element.
autofocus attribute can be set for any element; it will be used when displaying / refreshing the form

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