如何从input type='file'中选择视频文件并设置预览？

Question

如何从input type='file'中选择视频文件并设置预览？

69

在我的一个模块中，我需要从输入[type='file']中浏览视频，然后在开始上传之前显示所选视频。

我正在使用基本的HTML标签来展示，但它没有工作。

这是代码：

$(document).on("change",".file_multi_video",function(evt){
  
  var this_ = $(this).parent();
  var dataid = $(this).attr('data-id');
  var files = !!this.files ? this.files : [];
  if (!files.length || !window.FileReader) return; 
  
  if (/^video/.test( files[0].type)){ // only video file
    var reader = new FileReader(); // instance of the FileReader
    reader.readAsDataURL(files[0]); // read the local file
    reader.onloadend = function(){ // set video data as background of div
          
          var video = document.getElementById('video_here');
          video.src = this.result;
      }
   }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width="400" controls >
              <source src="mov_bbb.mp4" id="video_here">
            Your browser does not support HTML5 video.
          </video>


 <input type="file" name="file[]" class="file_multi_video" accept="video/*">

- Ronak Patel

7个回答

13

不要忘记它使用jquery库。

Javascript

$ ("#video_p").change(function () {
   var fileInput = document.getElementById('video_p');
   var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
   $(".video").attr("src", fileUrl);
});

Html

< video controls class="video" >
< /video >

- Fabian Quiroga

6

这里有一个简单易懂的解决方案

document.getElementById("videoUpload").onchange = function(event) {
  let file = event.target.files[0];
  let blobURL = URL.createObjectURL(file);
  document.querySelector("video").style.display = 'block';
  document.querySelector("video").src = blobURL;
}

<input type='file'  id='videoUpload'/>

<video width="320" height="240" style="display:none" controls autoplay>
  Your browser does not support the video tag.
</video>

这个解决方案使用原生JS，因此您不需要使用JQuery。已在Chrome上测试并且可以正常工作。祝好运！

- Abdulbasit

3

如果您遇到此问题，则可以使用以下方法解决上述问题。

以下是HTML代码：

//input tag to upload file
<input class="upload-video-file" type='file' name="file"/>

//div for video's preview
 <div style="display: none;" class='video-prev' class="pull-right">
       <video height="200" width="300" class="video-preview" controls="controls"/>
 </div>

下面是JS函数代码：

$(function() {
    $('.upload-video-file').on('change', function(){
      if (isVideo($(this).val())){
        $('.video-preview').attr('src', URL.createObjectURL(this.files[0]));
        $('.video-prev').show();
      }
      else
      {
        $('.upload-video-file').val('');
        $('.video-prev').hide();
        alert("Only video files are allowed to upload.")
      }
    });
});

// If user tries to upload videos other than these extension , it will throw error.
function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mp4':
    case 'mov':
    case 'mpg':
    case 'mpeg':
        // etc
        return true;
    }
    return false;
}

function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];
}

- Pragya Sriharsh

2

"最初的回答"

让我们简单点

HTML:

<video width="100%" controls class="myvideo" style="height:100%">
<source src="mov_bbb.mp4" id="video_here">
Your browser does not support HTML5 video.
</video>

"最初的回答"：JS:

function readVideo(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();   
        reader.onload = function(e) {
            $('.myvideo').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

- Usama Shahid

0

使用jQuery在上传前预览视频

$(function(){
    $('#videoFileInput').on('change',function(){
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = viewer.load;
        reader.readAsDataURL(file);
    });
    var viewer = {
        load : function(e) {
            $('#preview').show();
            $('#preview').attr('src',e.target.result);
        },
    }
});

<input type="file" name="video_file" class="form-control" accept="video/mp4" id="videoFileInput">

<video id="preview" width="600" controls style="display: none;margin-top: 25px;">
  Your browser does not support HTML5 video.
</video>

- demo insys

-1

这是关于VUE JS的示例：预览图片

示例源代码-拖放_部分

使用VIDEO.js进行渲染和createObjectURL()的示例

p.s. 我只是想改进“Pragya Sriharsh”的解决方案：

const = isVideo = filename =>'m4v,avi,mpg,mov,mpg,mpeg'
.split(',')
.includes( getExtension(filename).toLowerCase() )

还有，请不要使用 JQuery，现在是2k19年了:-);

-> 所以：

const getExtension = filename => {
    const parts = filename.split('.');
    return parts[parts.length - 1];
}

...让 Webpack 4 来完成剩下的工作吧！

- kostia7alania

jQuery仍然被许多主流的Web平台所使用，编写整个VUE或React组件来显示视频是不可行的。jQuery仍然是相关且受支持的。 - Drmzindec

1

JQuery像我的诺基亚3310一样得到支持，就像它仍然可以在我的网络上打电话一样。但这并不意味着你不应该尝试跟上时代的步伐。JQuery是垃圾。 - AhrenFullStop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

@FabianQuiroga说得对，你最好在这种情况下使用createObjectURL而不是FileReader，但你的问题更多与你设置了<source>元素的src有关，所以你需要调用videoElement.load()。

$(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  $source[0].src = URL.createObjectURL(this.files[0]);
  $source.parent()[0].load();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width="400" controls>
  <source src="mov_bbb.mp4" id="video_here">
    Your browser does not support HTML5 video.
</video>

<input type="file" name="file[]" class="file_multi_video" accept="video/*">

提示：在您不再需要它时，请勿忘记调用URL.revokeObjectURL($source[0].src)。