0

I tried this function to get the duration of a video from input field but it keep saying

Cannot read property '0' of undefined\

for the files[0]

 <input type="file" required="" id="id_video"></p>
 <input type="number" required="" id="id_duration"></p>
 <input type="submit" value="Upload">
 <pre id="infos"></pre>

<script>
var myVideos = [];

    window.URL = window.URL || window.webkitURL;

    document.getElementById('id_video').onchange = setFileInfo;

    function setFileInfo() {
        var files = this.files;
        myVideos.push(files[0]);
        var video = document.createElement('video');
        video.preload = 'metadata';

        video.onloadedmetadata = function() {
            window.URL.revokeObjectURL(video.src);
            var duration = video.duration;
            myVideos[myVideos.length - 1].duration = duration;
            updateInfos();
        }
        video.src = URL.createObjectURL(files[0]);
    }
    function updateInfos() {

        var infos = document.getElementById('infos');
        infos.textContent = "";
        for (var i = 0; i < myVideos.length; i++) {

            console.log(myVideos[i].duration)
            infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n';
        }
    }
</script>
M.Izzat
  • 1,086
  • 4
  • 22
  • 50
  • `id_raw_file` ? where is this? – Pedram Mar 13 '18 at 11:11
  • 1
    Check out this: https://stackoverflow.com/questions/29285056/get-video-duration-when-input-a-video-file – Timothé Malahieude Mar 13 '18 at 11:11
  • my apologies I update my code – M.Izzat Mar 13 '18 at 11:13
  • i've seen that link before but its not working, I'll try to give it a go again – M.Izzat Mar 13 '18 at 11:14
  • Probably my bad, but how did you come include so many errors while copy-pasting this code? What should I have done to make it clearer? – Kaiido Mar 13 '18 at 13:54
  • @Kaiido sry about that, i alraedy added the `infos` tag and remove the extra semicolon , in `video.src` but its saying "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at HTMLInputElement.setFileInfo" – M.Izzat Mar 14 '18 at 02:23
  • I'm using Chrome – M.Izzat Mar 14 '18 at 02:40
  • In my code `files` is the Filelist, in yours it is the File, hence `files[0]` is undefined in yours. – Kaiido Mar 14 '18 at 02:40
  • bare with me for a while, in createObjectURL(files[0]), what actually I have pass inside the createObjectURL(), the file directory? – M.Izzat Mar 14 '18 at 02:58
  • No you are passing `undefined` because you did declare `var files = this.files[0]` (a File object) while mine was `var files = this.files`, a FileList object) – Kaiido Mar 14 '18 at 03:43
  • @Kaiido updated my code, its not throwing me the error anymore but anything inside `video.onloadedmetadata = function` is not being trigger, I'm apologies for the complication – M.Izzat Mar 14 '18 at 04:05

1 Answers1

0

You don't need call the function "setFileInfo" immediately, you just make the bind, remove the (). As @Pedram ask where the id_raw_file? I presume the id name is "id_video" and you forgot the create a container to received the texts infos e.g: . I hope helped

Bruno Eduardo
  • 41
  • 5