javascript - que - ¿Cómo puedo configurar la vista previa del archivo de video, seleccionando del tipo de entrada=''archivo''?

imagenes de audio y video

Question

En uno de mis módulos, necesito navegar el video desde la entrada [type = ''file''], luego de eso necesito mostrar el video seleccionado antes de comenzar a subir.

Estoy usando la etiqueta HTML básica para mostrar. Pero no está funcionando.

Aquí está el código:

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

@FabianQuiroga tiene razón en que debería usar createObjectURL mejor que un FileReader en este caso, pero su problema tiene más que ver con el hecho de que configura el src de un elemento <source> , por lo que debe llamar a 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: no olvides llamar a URL.revokeObjectURL($source[0].src) cuando ya no lo necesites.

Answer 2

No olvides que usa la librería 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 >