
Skip to main content
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.
Bootstrap
Cmd
CodeIgniter
Css
Drupal
Git
Html
Javascript
Jquery
Laravel
Nodejs
Php
Python
Sql
Typescript
Wordpress
Random Code Snippet Queries: Javascript
- Generate 6 digit random number in javascript
- How to validate empty space in textbox in Javascript
- How to set href value of anchor tag in javascript
- How to use JavaScript to search for items in a list
- How to get the length of a number in JavaScript
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- Execute function with condition in javascript
- How can I add a key/value pair to a JavaScript object
- Javascript get only 10 characters from string
- How to echo array in Javascript
- How to get data from localstorage in javascript
- How to crop multiple images with cropper js
- Deault order of record in datatable
- Short-circuits conditionals
- How to pass array as arguments to function in javascript
- Get multiplication in javascript using array input
- ReferenceError: $ is not defined
- How to display for slash as a string in javascript HTML
- Uncaught TypeError: $(...).summernote is not a function
- Copy one array to another in javascript
- Cropper js with multiple images
- Prism js horizontally overflowing its container
- Get hostname from URL in javascript
- How to Set data to localstorage in javascript
- Remove hostname from URL in javascript