Питання Як я можу встановити попередній перегляд відеофайла, вибравши з введення type = 'file'


У одному з моїх модулів мені потрібно переглянути відео з входу [type = 'file'], після чого мені потрібно показати вибране відео перед початком завантаження.

Я використовую основний тег HTML для показу. але це не працює.

Ось код:

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


14
2018-03-16 12:28


походження




Відповіді:


@FabianQuiroga правильно, що вам слід краще використовувати createObjectURL ніж a FileReader в цьому випадку, але ваша проблема більше пов'язана з тим, що ви встановили src a <source> елемент, тому вам потрібно зателефонувати 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: не забудьте подзвонити URL.revokeObjectURL($source[0].src) коли ви більше не потребуєте.


33
2017-11-14 01:19



Треба бути прийнятою відповіддю! До речі, як впливає відсутність URL.revokeObjectURL ($ source [0] .src) в будь-який момент? - CarlosArturoFyuler
@ CarlosArturoFyuler у цьому випадку (користувач надав файл через input[type=file], не так багато ... Блубурі повернувся createObjectURL тут просто тримає прямого символьного посилання на файл на диску користувача, тому вплив пам'яті менш важливий. Але в інших випадках це має реальні наслідки: невиявлений bloburI із сформованого або схваленого Blob буде зберігати свої дані в пам'яті до закінчення сеансу. І ще гірше, як MediaStream, як gUM (у той час, коли ця відповідь була написана, cOU ще був способом показу MediaStreams, тепер застарілий), це може блокувати пристрій (наприклад, веб-камеру). - Kaiido
Спасибі за роз'яснення :) - CarlosArturoFyuler


Не забувайте, що він використовує бібліотеку 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 >

4
2017-11-14 01:09