JavaScript/Bookmarklets

Images

XMLHttpRequest

Images

XMLHttpRequest

Bookmarklets are one line scripts stored in the URL field of a bookmark. Bookmarklets have been around for a long time so they will work in older browsers.

JavaScript URI scheme

You should be familiar with URL that start with schemes like http and ftp, e.g. http://en.wikibooks.org/. There is also the JavaScript scheme, which is used to start every bookmarklet.

JavaScript:alert('Hello, World!');

Example uses

Media controls

The values in these examples can be adapted as desired. One may replace video with audio where applicable, meaning where an <audio> tag is embedded.

Loop the video

javascript:document.getElementsByTagName("video")[0].loop=1;
javascript:document.getElementsByTagName("video")[0].loop=true; // also works

Can be switched off using 0 or false.

Jump to ten minutes (using multiplication)

javascript:document.getElementsByTagName("video")[0].currentTime=60*10;

Jump forward by one minute (sixty seconds)

javascript:document.getElementsByTagName("video")[0].currentTime+=60;

Jump back by half a minute (using division)

javascript:document.getElementsByTagName("video")[0].currentTime-=60/2;

Get duration of a video on the page in console

javascript:document.getElementsByTagName("video")[0].duration

Alert the duration

javascript:alert('This video is '+document.getElementsByTagName("video")[0].duration+' seconds long.')

Alert the playback time

javascript:alert('The current position of the video is at '+document.getElementsByTagName("video")[0].currentTime+' seconds.')

Set audio volume to 50%

javascript:document.getElementsByTagName("video")[0].volume=50/100

Mute audio

javascript:document.getElementsByTagName("video")[0].muted=1 // "true" works as well

Unmute using 0 or false.

Double the playback speed

javascript:document.getElementsByTagName("video")[0].playbackRate=2

Ask for playback speed

javascript:document.getElementsByTagName("video")[0].playbackRate= parseFloat( prompt("How fast should it play?") );

parseFloat is necessary to prevent setting the value to zero if the dialogue window is closed without user input.

Ask for playback position in seconds

javascript:document.getElementsByTagName("video")[0].currentTime=parseFloat( prompt("Jump to playback position in seconds:") );

Ask for playback position in minutes

javascript:document.getElementsByTagName("video")[0].currentTime=60*parseFloat( prompt("Jump to playback position in minutes:") );

Ask for playback position in percentage (0 to 100)

javascript:document.getElementsByTagName("video")[0].currentTime=document.getElementsByTagName("video")[0].duration/100*parseFloat( prompt("Jump to playback position in percents:") );

Using multiple lines of code

Since you cannot have line breaks in bookmarklets you must use a semicolon at the end of each code statement instead.

JavaScript:name=prompt('What is your name?'); alert('Hello, ' + name);

The JavaScript Protocol in Links

The JavaScript protocol can be used in links. This may be considered bad practice, as it prevents access for or confuses users who have disabled JavaScript. See Best Practices.

<a href="JavaScript:document.bgColor='#0000FF'">blue background</a>

Examples

A large quantity of links may be found on bookmarklets.com, which show a variety of features that can be performed within JavaScript.