How to preview video before uploading in javascript

Created at 26-Jul-2021, By samar

How to preview video before uploading in javascript

We will use programming in this lesson to attempt to solve the "How to preview video before uploading in javascript".

You can preview the video before uploading it on the server using javascript.
  • Preview video before uploading jquery

    <!-- HTML Code -->
    <input id="file-input" type="file" accept="video/*">
    <video id="video" width="300" height="300" controls></video>
    
    <!-- JavaScript -->
    <script>
    const input = document.getElementById('file-input');
    const video = document.getElementById('video');
    const videoSource = document.createElement('source');
    
    input.addEventListener('change', function() {
      const files = this.files || [];
    
      if (!files.length) return;
      
      const reader = new FileReader();
    
      reader.onload = function (e) {
        videoSource.setAttribute('src', e.target.result);
        video.appendChild(videoSource);
        video.load();
        video.play();
      };
      
      reader.onprogress = function (e) {
        console.log('progress: ', Math.round((e.loaded * 100) / e.total));
      };
      
      reader.readAsDataURL(files[0]);
    });
    </script>
    

    You can preview the video before uploading it to the server using javascript. We have input type file HTML element to get the video from the user and video tag to display it in your browser using javascript code.

Back to code snippet queries related javascript

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.