2017-10-05 16 views
0

私はangularjsに新しいですし、私はstackoverflowの上でこのコードを見つけたので、誰かが、これはangularjsで行うことができますどのように私に言うことができるangularjs

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

と入力タイプのファイルを使用してビデオのプレビューを表示します。

答えて

0

ビデオの画像プレビューを読み込む関数を書くことができます。 HTMLで

$(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); 
     }, 
    }  

}); 

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

<video id="preview" src="" width="80%" height="99%" controls> 
</video> 
関連する問題