Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
HTML5 supports the mp3, ogg and webm video formats.
Video is dealt with exactly the same way as audio. The only difference between the audio example above and the video example below is that the <audio> tag has been replaced with a <video> tag. The reset of the code is identical.
Example of a Javascript controlled video player (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
let mediaClip; // shortcut for document.getElementById('mediaClip')
function init()
{
// initialise the mediaClip variable
mediaClip = document.getElementById('mediaClip');
// get the length of the audio clip
document.getElementById('clipDuration').innerHTML = 'Length:' + Math.floor(mediaClip.seekable.end(0) / 60) + ':' + twoDigits(Math.floor(mediaClip.seekable.end(0) % 60));
mediaClip.addEventListener("volumechange", mediaClipVolumeChangeHandler);
mediaClipVolumeChangeHandler(); // call first time to set volume display data
mediaClip.addEventListener("timeupdate", mediaClipTimeUpdateHandler);
mediaClipTimeUpdateHandler(); // call first time to set time display data
}
function playClip()
{
document.getElementById('mediaClip').play();
}
function pauseClip()
{
document.getElementById('mediaClip').pause();
}
function stopClip()
{
// There is no stop function.
// Instead, we pause and set the currentTime to 0
document.getElementById('mediaClip').pause();
document.getElementById('mediaClip').currentTime = 0;
}
function decreaseVolume()
{
// minimum volume is 0
if (mediaClip.volume > 0)
{
mediaClip.volume -= 0.01;
}
}
function increaseVolume()
{
// maximum volume is 1
if (mediaClip.volume < 1)
{
mediaClip.volume += 0.01;
}
}
function toggleMute()
{
if (mediaClip.muted)
{
mediaClip.muted = false;
}
else
{
mediaClip.muted = true;
}
}
function toggleControls()
{
if (mediaClip.controls)
{
mediaClip.controls = false;
}
else
{
mediaClip.controls = true;
}
}
function Goto15Secs()
{
mediaClip.currentTime = 15;
}
function twoDigits(number)
{
if (number < 10)
{
number = ("0" + number).slice(-2);
}
return number;
}
function mediaClipVolumeChangeHandler()
{
// update the current volume
if (mediaClip.muted)
{
document.getElementById('currentVolume').innerHTML = 'Volume:MUTED';
}
else
{
document.getElementById('currentVolume').innerHTML = 'Volume:' + Math.floor(mediaClip.volume * 100);
}
}
function mediaClipTimeUpdateHandler()
{
document.getElementById('currentPosition').innerHTML = 'Current Position:' + Math.floor(mediaClip.currentTime / 60) + ':' + twoDigits(Math.floor(mediaClip.currentTime % 60));
}
</script>
</head>
<body onload = 'init()'>
<video id = 'mediaClip' controls src = './video/video01.mp4'>
<p>Your browser does not support the 'audio' tag </p>
</video>
<br>
<button onclick = 'playClip()'>Play</button>
<button onclick = 'pauseClip()'>Pause</button>
<button onclick = 'stopClip()'>Stop</button>
<br>
<button onclick = 'decreaseVolume()'>Decrease Volume</button>
<button onclick = 'increaseVolume()'>Increase Volume</button>
<button onclick = 'toggleMute()'>Toggle Mute</button>
<br>
<button onclick = 'toggleControls()'>Toggle Controls</button>
<br>
<button onclick = 'Goto15Secs()'>Goto 15 Seconds</button>
<p id='clipDuration'></p>
<p id='currentPosition'></p>
<p id='currentVolume'></p>
</body>
</html>
Allow a user to type in the name of a video to be played, as shown here.
In addition to the shared functionality, video can also be resized, as shown below:
document.getElementById('mediaElementID').width = 240; // set video width
To get the current width of a video, use the code below:
let videoWidth = document.getElementById('mediaElementID').videoWidth;
Example of video changing size (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
let mediaClip;
let originalWidth;
function init()
{
mediaClip = document.getElementById("mediaClip");
originalWidth = mediaClip.videoWidth;
toggleSize();
}
function toggleSize()
{
if (mediaClip.width == originalWidth)
{
mediaClip.width = originalWidth * 0.5;
}
else
{
mediaClip.width = originalWidth;
}
}
</script>
</head>
<body onload='init()'>
<video id = 'mediaClip' controls src = './video/video02.mp4'>
<p>Your browser does not support the <video> tag </p>
</video>
<br>
<button onclick="toggleSize()">Toggle Size</button>
</body>
</html>
Adjust the above code to allow a user to resize the video by dragging the video's corner (solution).
By changing the <video> tag to <audio>, we can play back the audio part of a video file. The example below only plays the audio from the video example above.
Example of playing only the audio from a video file (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<audio id = 'mediaClip' controls src = './video/video02.mp4'>
<p>Your browser does not support the <video> tag </p>
</audio>
</body>
</html>
Allow a user to play either the video or the audio of a video file, as shown here.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.