
How to preview video before uploading in javascript
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.
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
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.
Random Code Snippet Queries: Javascript
- How to make entire Div clickable in javascript
- Trim the leading and trailing comma from string in Javascript
- Javascript set timeout function with example code
- How to pass array as arguments to function in javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- On click enter redirect to another URL with parameters in javascript
- How to show and hide placeholder text
- Prism js horizontally overflowing its container
- Get hostname from URL in javascript
- How to get file extension using javascript/jquery
- Custom slider js
- How to display for slash as a string in javascript HTML
- How to add a property to object with condition in javascript
- How to Set data to localstorage in javascript
- JavaScript test() Method
- Uncaught TypeError: Illegal invocation
- How to crop multiple images with cropper js
- How to display an image in Javascript onclick
- Cropper js with multiple images
- Javascript get data-id attribute value
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to use JavaScript to search for items in a list
- How to fixed bootstrap navbar at top on scroll
- How to get the length of a number in JavaScript
- Remove hostname from URL in javascript