Question

＆＃13;

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

＆＃13;

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

＆＃13;

我是angularjs的新手，我在stackoverflow上找到了这个代码，所以有人可以告诉我如何使用angularjs来完成。

Answer 1

您可以编写一个加载视频图像预览的功能。

$(function(){

   $('#file').on('change',function(){
       var file = this.files[0];
       var reader=new FileReader();
       reader.onload=viewer.load;
       reader.readAsDataURL(file);
       viewer.setProperties(file);
   });

   var viewer={
       load: function(e){
          $('#preview').attr('src',e.target.result);
       },
       setProperties: function(f){
          $('#filename').text(f.name);
          $('#filename').text(f.type);
       },
   }    

});

在html中

<img id="preview" alt="" src="" width="80%" height="99%"/>

<video id="preview" src="" width="80%" height="99%" controls>
</video>

我希望使用带有angularjs的输入类型文件来显示视频

1 个答案: