###前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/07 05:12
2016/07/07 05:23
2016/07/07 09:21