如何设置视频文件的预览，从输入类型='文件' [英] How can I set preview of video file, selecting from input type='file'

问题描述

在我的一个模块中，我需要从输入[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（）; // FileReader的实例reader.readAsDataURL（files [0]）; //读取本地文件reader.onloadend = function（）{//将视频数据设置为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>< / scri pt>< video width =400controls> < source src =mov_bbb.mp4id =video_here>您的浏览器不支持HTML5视频。 < /视频> < input type =filename =file []class =file_multi_videoaccept =video / *>  

解决方案

@FabianQuiroga是对的，你应该更好地使用 createObjectURL 在这种情况下， FileReader ，但您的问题更多地与您设置< source> 元素，所以你需要调用 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 =400controls> < source src =mov_bbb.mp4id =video_here>您的浏览器不支持HTML5视频。< / video>< input type =filename =file []class =file_multi_videoaccept =video / *>  

Ps：别忘了打电话给 URL.revokeObjectURL（$ source [ 0] .src）当你不再需要它时。

In one of my module, I need to browse video from input[type='file'], after that I need to show selected video before starting upload.

I am using basic HTML tag to show. but it is not working.

Here is code:

$(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/*">

解决方案

@FabianQuiroga is right that you should better use createObjectURL than a FileReader in this case, but your problem has more to do with the fact that you set the src of a <source> element, so you need to call 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: don't forget to call URL.revokeObjectURL($source[0].src) when you don't need it anymore.

这篇关于如何设置视频文件的预览，从输入类型='文件'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！