0

i have been looking for a straight answer without making a new question, trying to figure it out with other approach but doesn't seem to be like it.

I have this form to upload videos into my webpage (why? good question, because i like to complicate my life as much as i can). And in this form when you chose the video it automatically show on the canvas a little image in the first quarter of the video (why again?? don't know just seems like a good time) and when i try to take that generated image of the canvas to url data and put that same url data to an input field to upload it with the form i get this error:

TypeError: null is not an object (evaluating 'document.getElementById('fotodemourl').value = img')

now, i kind of know what the error means, but not why is generated, i leave my code below, can anybody tell my how to get the url data to the input??

    <label>Video:</label>
    <input type="file" name="vid" id="vid">
    <label>Duración:</label>
    <input type="text" name="viddur" id="viddur" size="6">
    <label style="color:grey;"><i>min:sec</i></label>

    <label>Foto:</label>
    <canvas id="fotodemo" style="width:150px; height:100px;"></canvas>
    <input type="text" name="fotodemourl">
    <input type="submit" value="Subir">

    </form>

    <video id="video" style="display:none;"></video>
    <script>
        var dur = 0;
        var video = document.getElementById('video');
        video.addEventListener('canplaythrough', function(e){
            dur = Math.round(e.currentTarget.duration);
            var min = Math.floor(dur / 60);
            var sec = dur % 60;



            document.getElementById('viddur').value = min + ':' + sec;

            var canvas = document.getElementById('fotodemo')
            var imgt = Math.floor(dur/4);
            video.currentTime = imgt;
            var vwidth = video.videoWidth;
            var vheight = video.videoHeight;
            var widthp = (canvas.width / vwidth);
            var heightp = (canvas.height / vheight);
            var prop = Math.min(widthp, heightp);
            var centx = (canvas.width - vwidth*prop)/2;
            var centy = (canvas.height - vheight*prop)/2;
            canvas.getContext("2d").drawImage(video, centx, centy, vwidth*prop, vheight*prop);
            var canvasimg = canvas.getContext("2d").drawImage(video, centx, centy, vwidth*prop, vheight*prop);
            var img = canvas.toDataURL('image/png');
            document.getElementById('fotodemourl').value = img;

            URL.revokeObjectURL(obUrl);
        });
        var obUrl;
        document.getElementById('vid').addEventListener('change', function(e){
            var file = e.currentTarget.files[0];
            if(file.name.match(/\.(mp4)$/i)){
                obUrl = URL.createObjectURL(file);
                document.getElementById('video').setAttribute('src', obUrl);
            }
        });
    </script>   

1 Answer 1

0

Because you don't have any element with 'fotodemourl' id, Add id to your HTML element.

<input type="text" name="fotodemourl" id="fotodemourl">
1
  • how stupid me, with some much coding in other parts i just didn't see it, thanks a lot, how dumb i feel right now
    – Ecangis
    Mar 5, 2016 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.