<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Editing Tool</title>
<style>
/* CSS styles for the interface */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#video-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
video {
width: 100%;
max-width: 800px;
}
#controls {
width: 100%;
max-width: 800px;
margin: 20px auto;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 0 5px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
input[type="range"] {
width: 80%;
margin: 0 10px;
}
</style>
</head>
<body>
<div id="video-container">
<video id="video" controls>
<source src="your_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="controls">
<button id="play-pause">Play/Pause</button>
<button id="stop">Stop</button>
<button id="mute">Mute</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
<button id="full-screen">Full Screen</button>
<br>
<button id="backward">Backward</button>
<button id="forward">Forward</button>
<input type="range" id="seek" min="0" max="100" step="0.1" value="0">
<br>
<label for="playback-rate">Playback Rate:</label>
<select id="playback-rate">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</div>
<script>
// JavaScript for controlling video playback
const video = document.getElementById('video');
const playPauseButton = document.getElementById('play-pause');
const stopButton = document.getElementById('stop');
const muteButton = document.getElementById('mute');
const volumeControl = document.getElementById('volume');
const fullScreenButton = document.getElementById('full-screen');
const backwardButton = document.getElementById('backward');
const forwardButton = document.getElementById('forward');
const seekBar = document.getElementById('seek');
const playbackRateSelect = document.getElementById('playback-rate');
playPauseButton.addEventListener('click', function() {
if (video.paused || video.ended) {
video.play();
playPauseButton.textContent = 'Pause';
} else {
video.pause();
playPauseButton.textContent = 'Play';
}
});
stopButton.addEventListener('click', function() {
video.pause();
video.currentTime = 0;
playPauseButton.textContent = 'Play';
});
muteButton.addEventListener('click', function() {
if (video.muted) {
video.muted = false;
muteButton.textContent = 'Mute';
} else {
video.muted = true;
muteButton.textContent = 'Unmute';
}
});
volumeControl.addEventListener('input', function() {
video.volume = volumeControl.value;
});
fullScreenButton.addEventListener('click', function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});
backwardButton.addEventListener('click', function() {
video.currentTime -= 5;
});
forwardButton.addEventListener('click', function() {
video.currentTime += 5;
});
seekBar.addEventListener('input', function() {
const time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
playbackRateSelect.addEventListener('change', function() {
video.playbackRate = parseFloat(playbackRateSelect.value);
});
video.addEventListener('timeupdate', function() {
const value = (video.currentTime / video.duration) * 100;
seekBar.value = value;
});
</script>
</body>
</html>
No comments:
Post a Comment