Jak ustawić podgląd pliku wideo, wybierając z typu wejścia = "plik"

Question

W jednym z moich modułów, muszę przeglądać wideo z wejścia [type = 'plik'], po czym muszę pokazać wybrane wideo przed rozpoczęcie przesyłania.

Używam podstawowego znacznika HTML do pokazania. ale to nie działa.

Oto kod:

$(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

Nie zapomnij, że używa biblioteki 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 2

@FabianQuiroga ma rację, że należy lepiej wykorzystywać createObjectURL niż FileReader w tym przypadku, ale problem ma więcej wspólnego z tym, że ustawia się src elementu <source>, więc trzeba zadzwonić pod numer 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: Nie zapomnij zadzwonić URL.revokeObjectURL($source[0].src) kiedy nie trzeba go już.

Answer 3

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

Jestem nowy angularjs więc chcę wiedzieć, że jak to można zrobić za pomocą angularjs