☰

入力タイプ='ファイル'から選択してビデオファイルのプレビューを設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript jquery html video html5-video
入力タイプ='ファイル'から選択してビデオファイルのプレビューを設定するにはどうすればいいですか? 質問する

私のモジュールの 1 つでは、input[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/*">

ベストアンサー1

createObjectURL@FabianQuiroga さんの言うとおり、この場合はよりもを使用する方がよいのですFileReaderが、問題は 要素の src を設定するという事実に関係しているため<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/*">

URL.revokeObjectURL($source[0].src)Ps:必要がなくなったら忘れずに電話してください。

おすすめ記事