The task to perform on the client. Search in Google while leads to nowhere, can anyone come across or accidentally stumble upon something like that? Specifically, it is necessary to determine the duration of the file playback and pull some picture out of it on the preview.

UPD. Browsers are all modern. The OS is preferably a Windows family. The file is entered by the user selecting the file type from the input field. If there are other options - I will be glad to advice.

  • What is the browser environment ?? if the browser is behind the browser and how does the video get into the browser, is the user loading or loading from the site? While there is no additional information it is difficult to say something specifically, but it will probably help w3schools.com/tags/ref_av_dom.asp - pnp2000

1 answer 1

<input type="file" id="file-input" /> <img id="preview-image" style="width: 300px" /> <script> const input = document.getElementById('file-input'); const preview = document.getElementById('preview-image'); input.addEventListener('change', function(e) { const video = document.createElement('video'); video.addEventListener('loadeddata', function(e) { const canvas = document.createElement('canvas'); // необходимо установить те же размеры, что и у загруженного видео, иначе превью будет обрезано canvas.width = this.videoWidth; canvas.height = this.videoHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0, this.videoWidth, this.videoHeight); const dataURL = canvas.toDataURL(); // вот и ссылка с превью preview.src = dataURL; console.log(this.duration); // а здесь длительность видео в секундах }); video.src = window.URL.createObjectURL(e.target.files[0]); }); </script>

In the example, only the first frame is extracted from the video. If you need any other, look here https://stackoverflow.com/questions/19175174/capture-frames-from-video-with-html5-and-javascript .

On windows unfortunately I can not check, on macOS it works in FF, Chrome and Safari of the latest versions.

  • I tried this method for audio, and even not always correctly gives the length - rodigy