All geek questions in one place

How to limit video duration with Dropzonejs?

I have a form that I upload a video, and the duration / length of the video is important.

After I upload the file using PHP, I check the length of the video file using FFMpeg .

I am calculating the duration in PHP and have to somehow send the duration value through PHP. I think I should add duration to the $result Json variable.

This is my html

 <!DOCTYPE html> <html> <head> <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script> <link href="css/dropzone.css" rel="stylesheet"> <script type="text/javascript"> Dropzone.options.myDropzone = { maxFiles: 1, acceptedFiles: "image/*,video/*", maxfilesexceeded: function (file) { this.removeAllFiles(); this.addFile(file); $('#infomsg').hide(); }, init: function () { $('#infomsg').hide(); this.on("success", function (result) { $('#infomsg').show(); $("#boatAddForm").append($('<input type="hidden" ' + 'name="files[]" ' + 'value="' + result.name + '">')); }); } }; </script> <title></title> </head> <body> <p> This is the most minimal example of Dropzone. The upload in this example doesn't work, because there is no actual server to handle the file upload. </p><!-- Change /upload-target to your upload address --> <form action="/dropzone/upload.php" class="dropzone" id="my-dropzone" name="my-dropzone"></form> <form action="/dropzone/son.php" id="boatAddForm" method="post" name= "boatAddForm"> <input class="submit" type="submit"> </form> </body> </html>

This is my php

 <?php $ds = DIRECTORY_SEPARATOR; $storeFolder = 'uploads'; if (!empty($_FILES)) { $tempFile = $_FILES['file']['tmp_name']; $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; $targetFile = $targetPath. $_FILES['file']['name']; move_uploaded_file($tempFile,$targetFile); } else { $result = array(); $files = scandir($storeFolder); //1 if ( false!==$files ) { foreach ( $files as $file ) { if ( '.'!=$file && '..'!=$file) { //2 $obj['name'] = $file; $obj['size'] = filesize($storeFolder.$ds.$file); $result[] = $obj; } } } header('Content-type: text/json'); //3 header('Content-type: application/json'); echo json_encode($result); }

If I could check the json user response right after

  Dropzone.options.myDropzone = {

like other requirements for success, I will not be eligible if the allegations are successful in order to verify validation.

I basically want to do it as I like

  maxFiles: 1,

without writing any conditions inside success

+6
source share
1 answer

As far as I understand, you want to get the duration of the video file on the client side. This is possible using HTML5 API methods. The original example is here .

By default, dropzone.js has no support. You will need to add this feature yourself.

Here is an example code to get the duration of a video when selecting a video file (taken from web.net cursors).

 <form action="#" method="post" enctype="multipart/form-data"> File: <input type="file" name="fup" id="fup" /><br> Duration: <input type="text" name="f_du" id="f_du" size="5" /> seconds<br> <input type="submit" value="Upload" /> </form> <audio id="audio"></audio> <script> // Code to get duration of audio /video file before upload - from: http://coursesweb.net/ //register canplaythrough event to #audio element to can get duration var f_duration =0; //store duration document.getElementById('audio').addEventListener('canplaythrough', function(e){ //add duration in the input field #f_du f_duration = Math.round(e.currentTarget.duration); document.getElementById('f_du').value = f_duration; URL.revokeObjectURL(obUrl); }); //when select a file, create an ObjectURL with the file and add it in the #audio element var obUrl; document.getElementById('fup').addEventListener('change', function(e){ var file = e.currentTarget.files[0]; //check file extension for audio/video type if(file.name.match(/\.(avi|mp3|mp4|mpeg|ogg)$/i)){ obUrl = URL.createObjectURL(file); document.getElementById('audio').setAttribute('src', obUrl); } }); </script>
0
source

Source: https://habr.com/ru/post/989778/

More articles:


All Articles