teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Androidで動画の再生をするときにタイムラグがある

編集履歴

質問編集履歴

1

質問内容をタイムラグの1点に絞らせていただきました。

2016/07/26 07:30

投稿

wkh0413
wkh0413

スコア20

test CHANGED
@@ -1 +1 @@
1
- Androidで一つ目の動画再生終了後、次の動画を再生させたい
1
+ Androidで動画の再生をするときにタイムラグがある
test CHANGED
@@ -1,20 +1,16 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- ①HTML5とJavascriptを使って動画を連続再生させたいのですが、Androidで実行すると、連続再生できません。
4
-
5
-
6
-
7
- ②現在、動画を切り替える際に、矢印の画像を表示させて、それをクリックすると次の動画に切り替わる、という方法を取っています。しかし、これをクリックしないで一つ目の動画が終了したら2つ目の動画に切り替わるようにしたいです。
3
+ Androidで動画を再生させたいのですが、再生ボタン(ボタンの画像をcanvasに貼り付けています)を押してから、動画が再生されるまでのタイムラグをなくしたいです。
8
-
9
-
10
-
11
- ③一つ目の動画を再生するときに、クリックしてから再生が始まるまでタイムラグがあるのも気になるのですが、Androidのスペックの問題でしょうか。
12
4
 
13
5
 
14
6
 
15
7
  ###発生している問題・エラーメッセージ
16
8
 
17
- PCで実行するとうまくいくのでが、Androidでは一つ目の動画再生終了後に表示される矢印の画像をクリックしても次の動画に切り替らず、真っ黒な画面が表示されてしまいます。二つ目の動画は、音もなっていないので、再生されていないようです。
9
+ 再生ボタンをクリックすると、画面が暗くなり、1秒くらいたってから動画が再生され始めます。
10
+
11
+ Androidのバージョンにも依存するのでしょうか。
12
+
13
+ Wi-Fiを使っています。
18
14
 
19
15
 
20
16
 
@@ -22,201 +18,49 @@
22
18
 
23
19
  ```Javascript
24
20
 
25
- var movie = document.getElementById("movie"), //描画領域
21
+ var Video = function(url) {
26
22
 
27
- canvasMovie = document.getElementById("myCanvas"), //動画用canvas
23
+ var thisObj = this;
28
24
 
29
- ctx = canvasMovie.getContext("2d");
25
+ this.url = url;
30
26
 
31
- canvasBitmap = document.getElementById("canvas"); //矢印用canvas
27
+ this.video = $('<video>').hide();
32
28
 
33
- //動画用canvasの場所・サイズ指定
29
+ this.video.attr('src',url);
34
30
 
35
- canvasMovie.style.position = "absolute";
31
+ };
36
32
 
37
- canvasMovie.style.top = 0;
33
+ Video.prototype.loadVideo = function(){
38
34
 
39
- canvasMovie.style.left = 0;
35
+ this.video.get(0).load();
40
36
 
41
- canvasMovie.style.width = 100 + "%";
37
+ };
42
38
 
43
- canvasMovie.style.height = 9*window.innerWidth/16 + "px";
39
+ Video.prototype.playVideo = function(){
40
+
41
+ this.video.get(0).play();
42
+
43
+ };
44
44
 
45
45
 
46
46
 
47
- //矢印用canvasの場所・サイズ指定
47
+ //canvasMovie : 動画を描画するCanvas
48
48
 
49
- canvasBitmap.style.position = "absolute";
49
+ canvasMovie.parentNode.insertBefore(video0.video.get(0),canvas);
50
-
51
- canvasBitmap.style.top = 0;
52
-
53
- canvasBitmap.style.left = 0;
54
-
55
- canvasBitmap.style.width = 100 + "%";
56
-
57
- canvasBitmap.style.height = 9*window.innerWidth/16 + "px";
58
50
 
59
51
 
60
52
 
53
+ //動画再生
61
54
 
55
+ togglePlay = function(){
62
56
 
63
- //ロード後の画面リサイズ
57
+ stage.removeChild(playButton);
64
58
 
65
- function Resize(){
59
+ stage.update();
66
60
 
67
- canvasMovie.style.width = 100 + "%";
61
+ video0.playVideo();
68
62
 
69
- canvasMovie.style.height = 9*window.innerWidth/16 + "px";
70
-
71
- canvasBitmap.style.width = 100 + "%";
72
-
73
- canvasBitmap.style.height = 9*window.innerWidth/16 + "px";
74
-
75
- }
76
-
77
- $(window).bind("resize",Resize);
78
-
79
-
80
-
81
- var stage = new createjs.Stage(canvasBitmap);
82
-
83
- var left = new createjs.Bitmap("img/left.png");
84
-
85
- left.scaleX = 0.2;
86
-
87
- left.scaleY = 0.2;
88
-
89
- left.x = 10;
90
-
91
- left.y = 80;
92
-
93
-
94
-
95
- var Video = function(url) {
96
-
97
- var thisObj = this;
98
-
99
- this.url = url;
100
-
101
- this.video = $('<video>').hide();
102
-
103
- this.audio = $('<audio>').hide();
104
-
105
- this.video.attr('src',url);
106
-
107
- this.audio.attr('src',url);
108
-
109
- };
63
+ };
110
-
111
-
112
-
113
-
114
-
115
- Video.prototype.loadVideo = function(){
116
-
117
- this.audio.get(0).load();
118
-
119
- this.video.get(0).load();
120
-
121
- };
122
-
123
-
124
-
125
-
126
-
127
- Video.prototype.pauseVideo = function() {
128
-
129
- console.log('pauseVideo');
130
-
131
- this.audio.get(0).pause()
132
-
133
- };
134
-
135
-
136
-
137
- Video.prototype.playVideo = function(){
138
-
139
- this.audio.get(0).play();
140
-
141
- };
142
-
143
-
144
-
145
- Video.prototype.draw =function(){
146
-
147
- this.video.get(0).currentTime = this.audio.get(0).currentTime;
148
-
149
- ctx.drawImage(this.video.get(0), 0, 0, 640, 360);
150
-
151
- };
152
-
153
-
154
-
155
- var video0 = new Video('video/door.mp4');
156
-
157
- var video1 = new Video('video/stairs.mp4');
158
-
159
-
160
-
161
- canvasMovie.parentNode.insertBefore(video0.video.get(0),canvas);
162
-
163
- canvasMovie.parentNode.insertBefore(video1.video.get(0),canvas);
164
-
165
-
166
-
167
- Video.prototype.playVideo = function() {
168
-
169
- this.video.get(0).play();
170
-
171
- };
172
-
173
-
174
-
175
- var selected_video = video0
176
-
177
-
178
-
179
- togglePlay = function(){
180
-
181
- video0.video.get(0).style.display = "block";
182
-
183
- console.log("toggleplay");
184
-
185
- video0.playVideo();
186
-
187
- video1.loadVideo();
188
-
189
- window.setTimeout(function(){
190
-
191
- stage.addChild(left);
192
-
193
- stage.update();
194
-
195
- movie.removeEventListener("click",togglePlay);
196
-
197
- left.addEventListener("click",playVideo1);
198
-
199
- console.log("playVideo1");
200
-
201
- },11000)
202
-
203
- };
204
-
205
-
206
-
207
- playVideo1 = function(){
208
-
209
- stage.removeChild(left);
210
-
211
- stage.update();
212
-
213
- video0.video.get(0).style.display = "none";
214
-
215
- video1.video.get(0).style.display = "block";
216
-
217
- video1.playVideo();
218
-
219
- };
220
64
 
221
65
 
222
66