如何设置视频文件的预览,从输入类型='文件'中选择

Question

在我的一个模块中,我需要从输入[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/*">

Answer 1

@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/*">

Ps:URL.revokeObjectURL($source[0].src)当你不再需要它时别忘了打电话.

Answer 2

不要忘记它使用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 >

Answer 3

这是一个简单的解决方案

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>

解决方案是使用 vanilla js，因此您不需要 JQuery，经过测试并可在 chrome 上运行，Goodluck