Video dosyasının önizlemesini nasıl ayarlayabilirim, giriş tipinden seçiyorum = 'dosya'

Question

Modemden birinde, [type = 'file'] girişinden videoya göz atmam gerekiyor, bundan sonra seçili videoyu daha önce göstermem gerekiyor yükleme başlatılıyor.

Göstermek için temel HTML etiketini kullanıyorum. ama bu çalışmıyor. İşte

kodudur:

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

o jquery kütüphanesini kullanan unutmayın

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 daha iyi bu durumda bir FileReader daha createObjectURL kullanması gerektiğini haklı, ama ihtiyacınız böylece sorunun, bir <source> elemanın src set gerçeği ile ilgisi vardır videoElement.load()'u aramak için

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

: Artık ihtiyaç olmadığında URL.revokeObjectURL($source[0].src) aramaya unutma. Öyle angularjs yeni am

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

Kabul cevabı olmalı angularjs