title: How to show the video in my jsp after browse?
body: <p>I have input [file] element.</p>
  
  <p>the id of this element <strong>id ="upload"</strong>.</p>
  
  <p>This is present in my jsp several times along with a <strong>&lt; video ></strong> as I am iterating the same element on jsp.</p>
  
  <p>Now I want to show the video just after i browse from my system in each input tag. </p>
  
  <p>But the first Input element is working fine but not other input file tags present after that.</p>
  
  <p>Can any one suggest me how to resolve this through Jquery or Javascript.</p>
  
  <p>Below is the Code : </p>
  
  <p>in jsp :</p>
  
  <pre><code>      &lt;div id='1'&gt;
        &lt; input type="file" id="uploadBtn" name="video" placeholder="browse file" &gt;
          &lt; video id="addVideo" controls autoplay &gt;&lt; / video&gt;
          &lt; div id="v_message"&gt;&lt; /div&gt;
        &lt;/div&gt;
  
  
      &lt;div id='2'&gt;
      &lt; input type="file" id="uploadBtn" name="video" placeholder="browse file" &gt;
          &lt; video id="addVideo" controls autoplay &gt;&lt; / video&gt;
          &lt; div id="v_message"&gt;&lt; /div&gt;
      &lt;/div&gt;
      .......
      .......
      .......
      &lt;div id='n'&gt;
      &lt; input type="file" id="uploadBtn" name="video" placeholder="browse file" &gt;
          &lt; video id="addVideo" controls autoplay &gt;&lt; / video&gt;
          &lt; div id="v_message"&gt;&lt; /div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>in script I have written :</p>
  
  <pre><code> (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 ' + 
             '&lt;a href="http://caniuse.com/bloburls"&gt;supported&lt;/a&gt;!', true);
  
          return;
      }                
  
      inputNode.addEventListener('change', playSelectedFile, false);
  }( window));
  </code></pre>