Question 413440 in Html Question posted in
Some basic documentation can be found here.

Html – Using Javascript to make a video player

I am using Javascript to make a video player that plays a video. All the codes seem to be added right. But the code does not seem to work. Here it is:

HTML

<video  id="myVideo">
    <source src="coolfirst2hours.mp4" type="video/mp4">
  </video>
<button id="playVid" type="button">PLAY</button>

Javascript

// Get the video and play button elements
const videoElem = document.getElementById('myVideo');
const playButton = document.getElementById('playVid');

// Add event listener to play button
playButton.addEventListener('click', () => {
  videoElem.play();
});
Tags:

2

Answers


  1. 0

    For the end of your HTML i think i will add this, for define buttons :

     <div id="controls">
        <button id="playVid" type="button">PLAY</button>
        <button id="pauseVid" type="button">PAUSE</button>
        <button id="stopVid" type="button">STOP</button>
        <button id="muteVid" type="button">MUTE</button>
        <button id="unmuteVid" type="button">UNMUTE</button>
        <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
        <input type="range" id="progressBar" value="0">
    </div>

    <script src="script.js"></script>

    And for the JavaScript part :

    const videoElem = document.getElementById('myVideo');
const playButton = document.getElementById('playVid');
const pauseButton = document.getElementById('pauseVid');
const stopButton = document.getElementById('stopVid');
const muteButton = document.getElementById('muteVid');
const unmuteButton = document.getElementById('unmuteVid');
const volumeControl = document.getElementById('volumeControl');
const progressBar = document.getElementById('progressBar');

playButton.addEventListener('click', () => {
    videoElem.play();
});

pauseButton.addEventListener('click', () => {
    videoElem.pause();
});

stopButton.addEventListener('click', () => {
    videoElem.pause();
    videoElem.currentTime = 0;
});

muteButton.addEventListener('click', () => {
    videoElem.muted = true;
});

unmuteButton.addEventListener('click', () => {
    videoElem.muted = false;
});

volumeControl.addEventListener('input', () => {
    videoElem.volume = volumeControl.value;
});

videoElem.addEventListener('timeupdate', () => {
    const progress = (videoElem.currentTime / videoElem.duration) * 100;
    progressBar.value = progress;
});

progressBar.addEventListener('input', () => {
    const newTime = (progressBar.value / 100) * videoElem.duration;
    videoElem.currentTime = newTime;
});
    Login or Signup to reply.
  2. 0

    you can try to check a couple of possible errors:

    1. Ensure that the path to coolfirst2hours.mp4 is correct, i.e. at the
      same level as your HTML file

    2. You can wrap your JavaScript code in a DOMContentLoaded event to
      ensure it waits until the page is fully loaded

      document.addEventListener('DOMContentLoaded', () => {
const videoElem = document.getElementById('myVideo');
const playButton = document.getElementById('playVid');

playButton.addEventListener('click', () => {
    videoElem.play();
});

      });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search