html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Player</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#player {
width: 600px;
margin-bottom: 20px;
}
#timeline {
width: 100%;
margin: 10px 0;
}
#loop {
margin-top: 10px;
}
</style>
</head>
<body>
<video id="player" controls>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<input type="range" id="timeline" value="0" step="1">
<button id="speedUp">Speed Up</button>
<button id="slowDown">Slow Down</button>
<label>
<input type="checkbox" id="loop"> Loop
</label>
<script>
const player = document.getElementById('player');
const timeline = document.getElementById('timeline');
const speedUpButton = document.getElementById('speedUp');
const slowDownButton = document.getElementById('slowDown');
const loopCheckbox = document.getElementById('loop');
player.addEventListener('timeupdate', () => {
timeline.value = (player.currentTime / player.duration) * 100;
});
timeline.addEventListener('input', () => {
player.currentTime = (timeline.value / 100) * player.duration;
});
speedUpButton.addEventListener('click', () => {
player.playbackRate += 0.25;
});
slowDownButton.addEventListener('click', () => {
player.playbackRate -= 0.25;
});
loopCheckbox.addEventListener('change', () => {
if (loopCheckbox.checked) {
player.loop = true;
} else {
player.loop = false;
}
});
</script>
</body>
</html>
"`
Haha 