HTML
1 <div id="movie_wrapper"> 2 <label for="movie">動画を選択</label> 3 <input id="movie" type="file" accept="video/*"></input> 4 </div>
javascript
1$(document).ready(function() { 2 3 // フォームデータクラスをインスタンス化 4 var formData = new FormData(); 5 6 // ファイルリーダークラスをインスタンス化 7 var fileReader = new FileReader(); 8 9 10 if (window.matchMedia('screen and (min-width: 992px)').matches) { 11 12 uploadMovie(); 13 test(); 14 15 } else if(window.matchMedia('screen and (max-width: 991px) and (min-width: 0px)').matches) { 16 17 18 19 } 20 21 /********** ここから各イベントごとのメソッドを宣言 **********/ 22 23 function uploadMovie() { 24 $('#movie').on('change', function() { 25 console.log("test"); 26 // .previewの中に入っているmovieタグをremoveする 27 $("#movie_wrapper").children('movie').remove(); 28 console.log($(this).val()); 29 if ('' !== $(this).val()) { 30 // ファイルが選択されている場合 31 32 // formDataにデータを追加 33 formData.append('movie', $(this).prop('files')[0]); 34 fileReader.onload = function() { 35 // ファイル読み込み完了時 36 // 新しい画像をappendする 37 $("#movie_wrapper").append('<video id="movie_preview" preload="auto" controls><source src="' + fileReader.result + '" type="video/mp4"></video>'); 38 // console.log($("video").currentTime); 39 } 40 // 動画読み込み実行 41 fileReader.readAsDataURL($(this).prop('files')[0]); 42 43 } 44 45 }); 46 } 47 48 function test() { 49 $("#movie_wrapper").on('timeupdate', '#movie_preview', function() { 50 console.log("tes"); 51 // if ($(this).currentTime >= 10 ) { 52 // // 10秒以上経過した際の処理 53 // // 動画の長さは$(this)[0].duration 54 // } 55 }); 56 } 57 58});
testメソッドのtimeupdateが機能しません。
clickだとうまくいきます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/30 03:59