JavaScript/Bookmarklets
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 edit
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 edit
Media controls edit
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 edit
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 edit
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 edit
A large quantity of links may be found on bookmarklets.com, which show a variety of features that can be performed within JavaScript.