質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2311閲覧

動画の読み込みに時間がかかる

wkh0413

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/07/07 04:32

###前提・実現したいこと
Javascriptで5つの動画を読み込みたいです。
Preloadjsを使用しています。

###発生している問題・エラーメッセージ
エラーは出ませんが、読み込むのに時間がかかってしまいます。
特にiPhoneで読み込むのに時間がかかってしまいます。mp4だと重たいのでしょうか?
###該当のソースコード

javascript

1$(function(){ 2 window.addEventListener("load",function(){ 3 init(); 4 }); 5 //ローディング画面設定 6 var _progressArc, 7 FPS = 60; 8 9 function ProgressArc(x,y,color,radius,thickness){ 10 createjs.Container.call(this); 11 this.x = x; 12 this.y = y; 13 this.color = color || "#666666"; 14 this.radius = radius || 40; 15 this.thickness = thickness || 6; 16 this.shape = new createjs.Shape(); 17 this.addChild(this.shape); 18 this.text = new createjs.Text(" 0%", "15px Consolas",this.color); 19 this.text.textAlign = "center"; 20 this.text.textBaseline = "middle"; 21 this.addChild(this.text); 22 } 23 ProgressArc.prototype = Object.create(createjs.Container.prototype); 24 ProgressArc.prototype.constructor = ProgressArc; 25 26 function slideEntry() { 27 stage.removeChild(_progressArc); 28 _progressArc = null; 29 } 30 31 var p = ProgressArc.prototype; 32 p.shape = null; 33 p.text = null; 34 p.color; 35 p.thickness; 36 p.radius; 37 p.startAngle = -90*createjs.Matrix2D.DEG_TO_RAD; 38 39 p.update = function(ratio){ 40 var endAngle = ((-90 + ratio * 360) >> 0)*createjs.Matrix2D.DEG_TO_RAD; 41 var g = this.shape.graphics; 42 g.c().ss(this.thickness, 0, 0, 10, true).s(this.color).a(0, 0, this.radius, this.startAngle,endAngle).es(); 43 var percent = (ratio*100)>>0; 44 var percent_txt; 45 if(percent < 100){ 46 percent_txt = (percent<10) ? " " + percent : " " + percent; 47 }else{ 48 percent_txt = "100"; 49 } 50 this.text.text = percent_txt + "%"; 51 }; 52 53 p.exit = function(){ 54 createjs.Tween.get(this.text) 55 .wait(350) 56 .to({alpha:0},1000,createjs.Ease.linear); 57 createjs.Tween.get(this.shape) 58 .wait(350) 59 .to({alpha:0, scaleX:1.75,scaleY:1.75},1000,createjs.Ease.cubicOut) 60 .call(slideEntry); 61 }; 62 63 var movie = document.getElementById("movie"), 64 canvasMovie = document.getElementById("myCanvas"), 65 canvasBitmap = document.getElementById("canvas"), 66 ctx = canvasMovie.getContext("2d"); 67//preloadの設定 68 function init(){ 69 var queue = new createjs.LoadQueue(true); 70 _progressArc = new ProgressArc(canvasMovie.width >> 1, canvasMovie.height >> 1); 71 stage.addChild(_progressArc); 72 createjs.Ticker.setFPS(FPS); 73 createjs.Ticker.useRAF = true; 74 createjs.Ticker.addEventListener("tick",stage); 75 function handleProgress(evt) { 76 _progressArc.update(evt.progress); 77 } 78 function handleFileLoad(event){ 79 var result = event.result; 80 } 81 function handleComplete(event){ 82 queue.removeAllEventListeners(); 83 _progressArc.exit(); 84 console.log("LOAD COMPLETE"); 85 movie.addEventListener("click",togglePlay); 86 } 87 var manifest = [ 88 {src: "img/left.png"}, 89 {src: "img/up.png"}, 90 {src: "img/right.png"}, 91 {src: "video/door.mp4"}, 92 {src: "video/room.mp4"}, 93 {src: "video/stairs.mp4"}, 94 {src: "video/left.mp4"}, 95 {src: "video/right.mp4"} 96 ]; 97 queue.loadManifest(manifest,true); 98 queue.addEventListener("progress",handleProgress); 99 queue.addEventListener("fileload",handleFileLoad); 100 queue.addEventListener("complete",handleComplete); 101 } 102

###試したこと
preloadで読み込む動画を1つだけにしてみましたが、読み込み時間に大きな差はみられませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Javascript,Atom

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

iPhoneの回線はなんですか?4GやLTEですか?Wi-Fiですか?

もしWi-Fiでもパソコンより遅いと感じるのであれば、以下のコードを試してみるとよいでしょう。
デフォルトでは確かPreload.jsはファイルのダウンロードは1個ずつですが、setMaxConnectionsを大きな数値にすることで並列でダウンロードするようになるはずです(ブラウザやサーバ側の同時接続制限数を超えることは出来ませんが)。

Javascript

1var queue = new createjs.LoadQueue(true); 2queue.setMaxConnections(4);//とりあえず4つまで同時ダウンロードするよう設定する

http://www.createjs.com/docs/preloadjs/classes/LoadQueue.html#method_setMaxConnections

投稿2016/07/07 04:53

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wkh0413

2016/07/07 05:12

ご回答ありがとうございます。回線はWi-Fiです。 試してみましたが、エラーが出てしまいました。 エラー:Get (ソース名) 503 (Service Unavailable)
masaya_ohashi

2016/07/07 05:23

503ということはサーバ側へのリクエストが溜まりすぎてダメになるパターンですね。ということはむやみに並列でアクセスするとだめということでしょう。私の提示した解決法はそのサーバでは使ってはダメ、ということですね。
wkh0413

2016/07/07 09:21

なるほど、わかりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問