Question

我一直在寻找一个直接的答案而没有提出新的问题，试图用其他方法来解决它，但似乎并不像它。

我有这个表单将视频上传到我的网页（为什么？好问题，因为我喜欢尽可能地复杂化我的生活）。在这种形式下，当你选择视频时，它会自动在画布上显示视频第一季的一个小图像（为什么再一次？不知道看起来好像是个好时光）当我尝试拍摄时生成画布的图像到url数据并将相同的url数据放到输入字段上以使用表单上传它我得到此错误：

TypeError：null不是对象（评估＆＃39; document.getElementById（＆＃39; fotodemourl＆＃39;）。value = img＆＃39;）

现在，我知道错误意味着什么，但不知道为什么生成，我将代码保留在下面，任何人都可以告诉我如何将url数据输入到输入中吗？

    <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>

Answer 1

因为您没有任何带有“fotodemourl”ID的元素，将ID添加到HTML元素中。

<input type="text" name="fotodemourl" id="fotodemourl">

从视频到画布到图像

1 个答案: