浏览后如何在我的jsp中显示视频

How to show the video in my jsp after browse?

本文关键字：jsp 显示 视频 我的 浏览      更新时间：2023-09-26

我输入了[file]元素。

id ="upload".

在我的jsp中与<，因为我在jsp上迭代相同的元素。

现在我想在每个输入标签中显示我从系统浏览后的视频。

但是第一个Input元素可以正常工作，但是之后的其他输入文件标签不能正常工作。

谁能告诉我如何通过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));

我只是像下面这样解决这个问题:

这就是我想要的。因此，无论有多少输入[文件]与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]);
         }
});
相关文章：