如何在瀏覽後在我的jsp中顯示視頻？

Question

我輸入了[file]元素。

這個元素的ID id =「upload」。

這是存在於我的jsp幾次，隨着<視頻>，因爲我在jsp上迭代相同的元素。

現在我想在每個輸入標籤中從我的系統中瀏覽後立即顯示視頻。

但是，第一個輸入元素工作正常，但之後沒有其他輸入文件標記。

任何人都可以告訴我如何通過Jquery或Javascript解決這個問題。

下面是代碼：

在JSP

：

 <div id='1'> 
     < input type="file" id="uploadBtn" name="video" placeholder="browse file" > 
     < video id="addVideo" controls autoplay ></video> 
     < div id="v_message">< /div> 
     </div> 


    <div id='2'> 
    < input type="file" id="uploadBtn" name="video" placeholder="browse file" > 
     < video id="addVideo" controls autoplay ></video> 
     < div id="v_message">< /div> 
    </div> 
    ....... 
    ....... 
    ....... 
    <div id='n'> 
    < input type="file" id="uploadBtn" name="video" placeholder="browse file" > 
     < video id="addVideo" controls autoplay ></video> 
     < div id="v_message">< /div> 
    </div> 

在腳本中，我已經寫了：

(function localFileVideoPlayerInit(win) { 
    var URL = win.URL || win.webkitURL, 
     displayMessage = (function displayMessageInit() { 
      var node = document.querySelector('#v_message'); 

      return function displayMessage(message, isError) { 
       node.innerHTML = message; 
       node.className = isError ? 'error' : 'info'; 
      }; 
     }()), 
     playSelectedFile = function playSelectedFileInit(event) { 
      var file = this.files[0]; 

      var type = file.type; 

      var videoNode = document.querySelector('#addVideo'); 

      var canPlay = videoNode.canPlayType(type); 

      canPlay = (canPlay === '' ? 'no' : canPlay); 

      var message = 'Can play type "' + type + '": ' + canPlay; 

      var isError = canPlay === 'no'; 

      displayMessage(message, isError); 

      if (isError) { 
       return; 
      } 

      var fileURL = URL.createObjectURL(file); 

      videoNode.src = fileURL; 
     }, 
     inputNode = document.querySelector('#uploadBtn'); 

    if (!URL) { 
     displayMessage('Your browser is not ' + 
      '<a href="http://caniuse.com/bloburls">supported</a>!', true); 

     return; 
    }     

    inputNode.addEventListener('change', playSelectedFile, false); 
}(window)); 

Answer 1

我剛剛解決這個問題象下面這樣：

這是我想如何。因此，沒有多少輸入[文件]與ID =「addVideo」在同一個jsp我可以替換視頻。並且視頻將在相應視頻標籤中自動播放

  $(document).delegate("#addVideo","change",function showVideoFile(event){ 
    var vid = $(this).parent().find("Video"); 
    if (this.files && this.files[0]) { 

     var filerdr = new FileReader(); 
     filerdr.onload = function(event) { 
      vid.attr('src', event.target.result); 
     }, 
     filerdr.readAsDataURL(this.files[0]); 
     } 

});