Untitled
unknown
plain_text
a year ago
2.2 kB
5
Indexable
<!DOCTYPE html> <html> <head> <title>YouTube Video Player</title> <style> #video-player { width: 640px; height: 360px; background-color: #000; position: relative; } #video-player video { width: 100%; height: 100%; } #controls { position: absolute; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 8px; display: flex; align-items: center; } #controls button { background-color: #fff; border: none; padding: 5px 8px; margin-right: 5px; cursor: pointer; } </style> </head> <body> <div id="video-player"> <video id="video" controls> <source src="your_video_url.mp4" type="video/mp4"> </video> <div id="controls"> <button id="play-pause">Play</button> <button id="stop">Stop</button> <input id="volume" type="range" min="0" max="1" step="0.1" value="1"> </div> </div> <script> const video = document.getElementById("video"); const playPauseButton = document.getElementById("play-pause"); const stopButton = document.getElementById("stop"); const volumeControl = document.getElementById("volume"); playPauseButton.addEventListener("click", () => { if (video.paused || video.ended) { video.play(); playPauseButton.innerHTML = "Pause"; } else { video.pause(); playPauseButton.innerHTML = "Play"; } }); stopButton.addEventListener("click", () => { video.pause(); video.currentTime = 0; playPauseButton.innerHTML = "Play"; }); volumeControl.addEventListener("input", () => { video.volume = volumeControl.value; }); </script> </body> </html>
Editor is loading...
Leave a Comment