動画からサムネイル画像を複数取得

###前提・実現したいこと

<file>タグで動画ファイル選択

↓
2. 動画が読み込まれて<video>タグ内に表示される
↓
3. javascriptで<video>タグ内の表示をサムネイル画像として.imgAreaに追加
↓
4. 再生位置を進めて<video>タグ内の表示を変える
↓
5. javascriptで<video>タグ内の表示をサムネイル画像として.imgAreaに追加
↓
6. 再生位置を進めて<video>タグ内の表示を変える
↓
7. javascriptで<video>タグ内の表示をサムネイル画像として.imgAreaに追加
↓
…
を実現したいです。

###発生している問題・エラーメッセージ
下記ソースコードの、
video.currentTime = 0
と
video.currentTime = 15
の場合しか期待した動作をしません。。

video.currentTime = 5
と
video.currentTime = 10
の処理が完了する前に処理が進んでしまっているような感じです

###該当のソースコード

<style type="text/css">
  canvas{
    display: none;
  }
</style>
</head>
<body>
<input type="file" id="file" name="movie_file">
<video controls></video>
<canvas id="canvas"></canvas>
<div class="imgArea"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(function () {
  $("#file").change(function(){
    for(var i = 0; i < this.files.length; i++){
      $('video').attr("src", URL.createObjectURL(this.files[i]));
    }
    var video = document.querySelector('video')

    video.onseeked = function(){
      capture()
    }

    video.onloadeddata = function(){
      video.currentTime = 0
      setTimeout(function() {
        video.currentTime = 5
      }, 1000);
      setTimeout(function() {
        video.currentTime = 10
      }, 1000);
      setTimeout(function() {
        video.currentTime = 15
      }, 1000);
      }
  });

  function capture() {
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d"); 

    var video_img = document.querySelector("video");
    video_img.width = video_img.videoWidth;
    video_img.height = video_img.videoHeight;

    canvas.width = video_img.width
    canvas.height = video_img.height
    context.drawImage(video_img, 0, 0);

    var imgSrc = canvas.toDataURL("image/jpeg" , 0.8);
    $('.imgArea').append('<img src=' + imgSrc + ')
  }

行動規範の内容に同意します

回答2件

こんな感じですかー？

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
7<style type="text/css">
8  canvas{
9    display: none;
10  }
11</style>
12</head>
13<body>
14<input type="file" id="file" name="movie_file">
15<video controls></video>
16<canvas id="canvas"></canvas>
17<div class="imgArea"></div>
18<script>
19$(function(){
20	var video = document.querySelector('video')
21	video.onloadedmetadata = function(){
22		var canvas = document.querySelector("#canvas");
23		canvas.width = video.videoWidth;
24		canvas.height = video.videoHeight;
25	};
26	var current = 0;
27	video.onseeked = function(){
28		if (current > 15) {
29			return;
30		}
31		capture();
32		current += 5;
33		this.currentTime = current;
34	};
35	video.onloadeddata = function(){
36  		this.currentTime = 0;
37		current = 0;
38    };
39	$("#file").change(function(){
40		video.src = (URL).createObjectURL(this.files[0]);
41  	});
42	function capture(){
43		var canvas = document.querySelector("#canvas");
44	  	var context = canvas.getContext("2d");
45	  	context.drawImage(video, 0, 0);
46	  	var img = new Image();
47	  	img.src = canvas.toDataURL("image/jpeg" , 0.8);
48	  	$('.imgArea').append(img);
49  	}
50});
51</script>
52</body>
53</html>

参考
Capture frames from video with HTML5 and JavaScript - Stack Overflow

投稿2017/04/05 09:06

編集2017/04/10 19:02

umyu

総合スコア5846

退会済みユーザー

2017/05/31 01:46

回答が非常に遅くなってしまいすみません。。記載いただいたコードで確認したところ、こちらでも期待通りの動作を確認できました！ご教示いただきありがとうございます。

行動規範の内容に同意します

ベストアンサー

全て見てはないですが、setTimeoutが同時に走っているからではないでしょうか。

javascript
1video.onloadeddata = function(){
2  video.currentTime = 0
3  setTimeout(function() {
4    video.currentTime = 5
5  }, 1000);
6  setTimeout(function() {
7    video.currentTime = 10
8  }, 1000);
9  setTimeout(function() {
10    video.currentTime = 15
11  }, 1000);
12  }
13});
14

以下のように修正

video.onloadeddata = function(){
  video.currentTime = 0
  var timer = setTimeout(function() {
    // 15以上の場合1sごとの処理を止める
    if(video.currentTime >= 15) clearTimeout(timer)

    // 5s追加
    video.currentTime += 5
  }, 1000);
});

試してないのでえらーでたらすいません( ；∀；)
setTimeoutが原因だと思うので、その辺を修正してみて下さい！

投稿2017/04/05 08:01