從視頻到畫布圖像

Question

我一直在尋找不使一個新的問題直接回答，試圖用另一種方法來弄明白，但似乎並不像它。

我有這樣的形式將視頻上傳到我的網頁上（爲什麼？很好的問題，因爲我喜歡我的生活，盡我所能複雜）。並以這種形式時選擇的視頻，它會自動在畫布上顯示視頻的第一季度有點像（爲什麼再次??不知道剛纔似乎是一個很好的時間），當我試圖把生成的圖像畫布URL數據，並把同樣的URL數據的輸入字段與形式我得到這個錯誤上傳：

類型錯誤：null不是一個對象（評估「的document.getElementById（」 fotodemourl'）。值= img'）

現在，我有點知道什麼是錯誤的意思，但不是爲什麼生成，我離開我的代碼下面，有人可以告訴我如何獲得網址數據輸入？

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