Multimedia Tags in HTML

<audio src="song.mp3"></audio>

<audio src="song.mp3" controls></audio>

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

<audio src="background.mp3" autoplay></audio>

<audio src="loop.mp3" loop controls></audio>

<audio src="intro.mp3" muted controls></audio>

<audio src="background.mp3" autoplay muted loop>
<!-- Background music that starts silently -->
</audio>

<audio id="player" src="song.mp3" controls></audio>

<script>
const audio = document.getElementById("player");

audio.onplay = () => console.log("Playing");
audio.onpause = () => console.log("Paused");
audio.onended = () => console.log("Finished");
audio.ontimeupdate = () => console.log(audio.currentTime);
</script>

<video src="movie.mp4"></video>

<video src="movie.mp4" controls></video>

<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Your browser does not support the video element.
</video>

<video src="intro.mp4" autoplay></video>

<video src="loop.mp4" loop controls></video>

<video src="movie.mp4" controls poster="thumbnail.jpg">
</video>

<video src="movie.mp4" controls width="640" height="360">
</video>

<video src="intro.mp4" autoplay muted loop>
</video>

<video id="vid" src="movie.mp4" controls></video>

<script>
const vid = document.getElementById("vid");

vid.onplay = () => console.log("Playing");
vid.onpause = () => console.log("Paused");
vid.onvolumechange = () => console.log("Volume:", vid.volume);
vid.onfullscreenchange = () => console.log("Fullscreen:", document.fullscreenElement);

// Custom controls
document.getElementById("playBtn").onclick = () => vid.play();
document.getElementById("pauseBtn").onclick = () => vid.pause();
document.getElementById("seekBar").oninput = (e) => {
vid.currentTime = (e.target.value / 100) * vid.duration;
};
</script>