Hamadullah110/Online_Video_Player_Hammad
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Video Player</title>7 <style>8 /* Basic styling */9 body {10 font-family: Arial, sans-serif;11 display: flex;12 flex-direction: column;13 align-items: center;14 padding: 20px;15 }16 #videoPlayer {17 width: 100%;18 max-width: 800px;19 margin-bottom: 10px;20 }21 #statusBar {22 width: 100%;23 max-width: 800px;24 }25 button {26 margin: 5px;27 padding: 10px 20px;28 font-size: 16px;29 cursor: pointer;30 }31 input[type="text"] {32 padding: 10px;33 font-size: 16px;34 margin-top: 10px;35 width: 100%;36 max-width: 800px;37 }38 /* Simple responsive design */39 @media (max-width: 600px) {40 button {41 font-size: 14px;42 }43 input[type="text"] {44 font-size: 14px;45 }46 }47 </style>48</head>49<body>50 51 <!-- Controls and Video Player -->52 <button id="openBtn">Open</button>53 <input type="text" id="videoUrl" placeholder="Enter video URL" style="display:none;">54 <button id="playBtn" style="display:none;">Play</button>55 <button id="pauseBtn" style="display:none;">Pause</button>56 <button id="stopBtn" style="display:none;">Stop</button>57 58 <video id="videoPlayer" controls>59 <source id="videoSource" src="" type="video/mp4">60 Your browser does not support the video tag.61 </video>62 63 <input type="range" id="statusBar" value="0" max="100" step="0.1" style="width: 100%;" disabled>64 65 <script>66 // Variables for video and controls67 const videoPlayer = document.getElementById("videoPlayer");68 const videoSource = document.getElementById("videoSource");69 const70