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

IT技术 javascript jquery html video html5-video
2021-02-17 02:40:11

在我的一个module中，我需要从 input[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/*">

6个回答

@FabianQuiroga 是正确的，在这种情况下您应该createObjectURL比 a更好地使用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)。

应该是公认的答案！顺便说一句，在任何时候都不做 URL.revokeObjectURL($source[0].src) 有什么影响？
2021-04-17 02:40:11
谢谢你的澄清:)
2021-04-25 02:40:11
@CarlosArturoFyuler 在这种情况下（用户提供 File through input[type=file]，而不是...createObjectURL这里返回的 blobURI仅包含指向用户磁盘上文件的直接符号链接，因此内存影响不那么重要。但在其他情况下, 它确实有真正的后果：来自生成或获取的 Blob 的未撤销的 blobURI 会将其数据保存在内存中，直到会话结束。更糟糕的是，使用 MediaStream，例如 gUM（在编写此答案时，cOU 仍然是显示 MediaStreams，现在已弃用），它可能会阻止设备（例如网络摄像头）。
2021-04-26 02:40:11
$source.parent(...)[0].load 不是函数
2021-04-28 02:40:11

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

如果你正面临这个问题。然后你可以使用下面的方法来解决上面的问题。

这是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];
}

让我们轻松一点

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]);
    }
}

这是一个简单的解决方案

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

其它你可能感兴趣的问题
上一篇将数组从 MVC 传递给 javascript？ 下一篇为什么数组上的js映射会修改原始数组？