Q:

How to show the video in my jsp after browse?

I have input [file] element.
the id of this element id ="upload".
This is present in my jsp several times along with a < video > as I am iterating the same element on jsp.
Now I want to show the video just after i browse from my system in each input tag. 
But the first Input element is working fine but not other input file tags present after that.
Can any one suggest me how to resolve this through Jquery or Javascript.
Below is the Code : 
in 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>

in script I have written :
 (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));

A:

I just resolve the issue like below : 
This is how I wanted. So that no mater how many input[file]  with id= "addVideo"  in the same jsp I can replace video. and the video will be played automatically in the respective video tag
         $(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]);
         }

});

