Skip to content

C
check
Commit 999c601a by Masaru Abe
Options

パフォーマンス改善　動画キャッシュ関連

parent 4a385f13
Showing with 155 additions and 35 deletions
abvw/common/js/avweb.js
...@@ -631,7 +631,7 @@ function avwGrabContentPageImage(accountPath, params, success, error) { ...@@ -631,7 +631,7 @@ function avwGrabContentPageImage(accountPath, params, success, error) {
//フィアルシステムが有効であればキャッシュ //フィアルシステムが有効であればキャッシュ
if( CONTENTVIEW_FILESYSTEM.fs != null ){ if( CONTENTVIEW_FILESYSTEM.fs != null ){
var fileName = "page_" + params.pageNo + ".dat"; var fileName = "page_" + params.pageNo + ".dat";
CONTENTVIEW_FILESYSTEM.saveFile(params.contentId, fileName, src); CONTENTVIEW_FILESYSTEM.savePageFile(params.contentId, fileName, src);
} }
if (success) { if (success) {
......
abvw/js/contentview.js
...@@ -4955,7 +4955,7 @@ function showControlsVideo(target) { ...@@ -4955,7 +4955,7 @@ function showControlsVideo(target) {
}; };
/* show video*/ /* show video*/
function showVideoObject(x, y, width, height, src, isFullscreen) { function showVideoObject(x, y, width, height, src, isFullscreen, isAddKey) {
var pt1 = imageToScreen(x, y); var pt1 = imageToScreen(x, y);
var pt2 = imageToScreen(x + width, y + height); var pt2 = imageToScreen(x + width, y + height);
...@@ -4968,6 +4968,10 @@ function showVideoObject(x, y, width, height, src, isFullscreen) { ...@@ -4968,6 +4968,10 @@ function showVideoObject(x, y, width, height, src, isFullscreen) {
//getPosVideo(x, y, (pt2.x - pt1.x), (pt2.y - pt1.y)); //getPosVideo(x, y, (pt2.x - pt1.x), (pt2.y - pt1.y));
getPosVideo(x, y, width, height); getPosVideo(x, y, width, height);
if( !isFullscreen && isAddKey ){
src = src + '&key=' + (new Date()).toIdString();
}
if (isFullscreen === false) { if (isFullscreen === false) {
$('#playvideo').attr('z-order', '1000'); $('#playvideo').attr('z-order', '1000');
$('#playvideo').css('left', pt1.x + 'px'); $('#playvideo').css('left', pt1.x + 'px');
...@@ -4979,8 +4983,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) { ...@@ -4979,8 +4983,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) {
'width="' + (pt2.x - pt1.x) + '" ' + 'width="' + (pt2.x - pt1.x) + '" ' +
'height="' + (pt2.y - pt1.y) + '" ' + 'height="' + (pt2.y - pt1.y) + '" ' +
'autoplay controls loop>' + 'autoplay controls loop>' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' + ' <source src="' + src + '" type="video/mp4"> ' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' + ' <source src="' + src + '" type="video/ogg"> ' +
'</video>' '</video>'
); );
} else { } else {
...@@ -4988,8 +4992,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) { ...@@ -4988,8 +4992,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) {
'width="' + (pt2.x - pt1.x) + '" ' + 'width="' + (pt2.x - pt1.x) + '" ' +
'height="' + (pt2.y - pt1.y) + '" ' + 'height="' + (pt2.y - pt1.y) + '" ' +
'autoplay controls>' + 'autoplay controls>' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' + ' <source src="' + src + '" type="video/mp4"> ' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' + ' <source src="' + src + '" type="video/ogg"> ' +
'</video>' '</video>'
); );
} }
......
abvw/js/contentview_Events.js
...@@ -868,6 +868,8 @@ function onUnlock() { ...@@ -868,6 +868,8 @@ function onUnlock() {
function onClick_CanvasMain(event) { function onClick_CanvasMain(event) {
console.log("onClick_CanvasMain");
event.preventDefault(); event.preventDefault();
if(isLoadingObject){ if(isLoadingObject){
...@@ -1493,6 +1495,8 @@ function resetNaviAction(){ ...@@ -1493,6 +1495,8 @@ function resetNaviAction(){
function onTouchstart(evt){ function onTouchstart(evt){
console.log("onTouchstart _isClick:" + _isClick);
//evt.preventDefault(); //evt.preventDefault();
if(ClientData.IsAddingMarking() == true){ if(ClientData.IsAddingMarking() == true){
...@@ -1540,7 +1544,6 @@ function onTouchstart(evt){ ...@@ -1540,7 +1544,6 @@ function onTouchstart(evt){
_touchFirstPos = null; _touchFirstPos = null;
if(_bWin8TouchEnabled){ if(_bWin8TouchEnabled){
_bufferPoints = []; _bufferPoints = [];
if(_startPoints.length == 0){ if(_startPoints.length == 0){
// start navi page case // start navi page case
...@@ -1728,6 +1731,8 @@ var isPreventClick = false; ...@@ -1728,6 +1731,8 @@ var isPreventClick = false;
function onTouchmove(evt){ function onTouchmove(evt){
console.log("onTouchmove isClick:" + _isClick);
//evt.preventDefault(); //evt.preventDefault();
if(ClientData.IsAddingMarking() == true){ if(ClientData.IsAddingMarking() == true){
...@@ -1931,11 +1936,15 @@ function onTouchmove(evt){ ...@@ -1931,11 +1936,15 @@ function onTouchmove(evt){
} }
} }
else{ else{
_isClick = false; //_isClick = false;
// for android or ipad // for android or ipad
touch1 = evt.touches[0]; touch1 = evt.touches[0];
touch2 = evt.touches[1]; touch2 = evt.touches[1];
if( touch2 != null ){
_isClick = false;
}
if(_3dAnimate){ if(_3dAnimate){
var imagePt = screenToImage(touch1.pageX, touch1.pageY); var imagePt = screenToImage(touch1.pageX, touch1.pageY);
...@@ -2006,6 +2015,8 @@ function onTouchmove(evt){ ...@@ -2006,6 +2015,8 @@ function onTouchmove(evt){
function onTouchend(evt){ function onTouchend(evt){
console.log("onTouchend isClick:" + _isClick);
//evt.preventDefault(); //evt.preventDefault();
if(ClientData.IsAddingMarking() == true){ if(ClientData.IsAddingMarking() == true){
...@@ -2080,8 +2091,10 @@ function onTouchend(evt){ ...@@ -2080,8 +2091,10 @@ function onTouchend(evt){
touchStartedTime= 0; touchStartedTime= 0;
if(_moveNum == 2){ if(_moveNum == 2){
nextPage_click(); nextPage_click();
return;
}else if (_moveNum == -2){ }else if (_moveNum == -2){
prevPage_click(); prevPage_click();
return;
}else { }else {
correctCanvasPosition(); correctCanvasPosition();
} }
......
abvw/js/contentview_FileSystem.js
...@@ -2,16 +2,10 @@ ...@@ -2,16 +2,10 @@
//名前空間用のオブジェクトを用意する //名前空間用のオブジェクトを用意する
var CONTENTVIEW_FILESYSTEM = {}; var CONTENTVIEW_FILESYSTEM = {};
$(function () { CONTENTVIEW_FILESYSTEM.isXhrBusy = false;
//CONTENTVIEW_FILESYSTEM.fs = null; //$(function () {
//window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; //});
//// Initiate filesystem on page load.
//if (window.requestFileSystem) {
// CONTENTVIEW_FILESYSTEM.initFS();
//}
});
CONTENTVIEW_FILESYSTEM.initFS = function( func ) { CONTENTVIEW_FILESYSTEM.initFS = function( func ) {
...@@ -32,21 +26,32 @@ CONTENTVIEW_FILESYSTEM.initFS = function( func ) { ...@@ -32,21 +26,32 @@ CONTENTVIEW_FILESYSTEM.initFS = function( func ) {
function(filesystem) { function(filesystem) {
console.log("initFS window.requestFileSystem"); console.log("initFS window.requestFileSystem");
CONTENTVIEW_FILESYSTEM.fs = filesystem; CONTENTVIEW_FILESYSTEM.fs = filesystem;
CONTENTVIEW_FILESYSTEM.fs.root.getDirectory('abook', {create: true}, null, CONTENTVIEW_FILESYSTEM.errorHandler); CONTENTVIEW_FILESYSTEM.fs.root.getDirectory(
'abook',
{create: true},
function(dirEntry) {
// /abookディレクトリ作成成功
if( func != null ){ if( func != null ){
func(); func();
} }
}, },
CONTENTVIEW_FILESYSTEM.errorHandler CONTENTVIEW_FILESYSTEM.errorHandler
); );
},
function(err){ // 失敗時のコールバック関数
CONTENTVIEW_FILESYSTEM.errorHandler(err);
if( func != null ){
func();
}
}
);
}; };
CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) { CONTENTVIEW_FILESYSTEM.savePageFile = function(contentId, fileName, data) {
if (!CONTENTVIEW_FILESYSTEM.fs) { if (!CONTENTVIEW_FILESYSTEM.fs) {
console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId);
return; return;
} }
...@@ -56,7 +61,7 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) { ...@@ -56,7 +61,7 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) {
'/abook/' + contentId, '/abook/' + contentId,
{create: true}, {create: true},
function(dirEntry) { function(dirEntry) {
// /abook/contentId ディレクトリ作成成功
CONTENTVIEW_FILESYSTEM.fs.root.getFile( CONTENTVIEW_FILESYSTEM.fs.root.getFile(
'/abook/' + contentId + "/" + fileName, '/abook/' + contentId + "/" + fileName,
{create: true}, {create: true},
...@@ -71,10 +76,6 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) { ...@@ -71,10 +76,6 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) {
}; };
var blobData = new Blob([data], {type:"text/plain"}); var blobData = new Blob([data], {type:"text/plain"});
fileWriter.write(blobData); fileWriter.write(blobData);
//var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.
//bb.append(data);
//fileWriter.write(bb.getBlob('text/plain'));
} }
); );
}, },
...@@ -114,21 +115,26 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -114,21 +115,26 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
if (!CONTENTVIEW_FILESYSTEM.fs) { if (!CONTENTVIEW_FILESYSTEM.fs) {
console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId); console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId);
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++; nAjaxLoad++;
//ファンクションがあれば実行
if( func != null ){
func(data); func(data);
}
return; return;
} }
//既にjson.txtが存在するか //既にjson.txtが存在するか
var fileName = contentID + "/json.txt"; var fileName = contentID + "/json.txt";
CONTENTVIEW_FILESYSTEM.fs.root.getFile('/abook/' + fileName, { create: false }, CONTENTVIEW_FILESYSTEM.fs.root.getFile(
'/abook/' + fileName,
{ create: false },
function(fileEntry){ function(fileEntry){
fileEntry.file( fileEntry.file(
function(file){ function(file){
var reader = new FileReader(); var reader = new FileReader();
reader.onloadend = function(e) { reader.onloadend = function(e) {
console.log("read Json.txt"); console.log("read Json.txt");
//console.log(e.target.result);
//JSONに戻す //JSONに戻す
var jsonObjOld = JSON.parse(e.target.result); var jsonObjOld = JSON.parse(e.target.result);
...@@ -136,9 +142,9 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -136,9 +142,9 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
console.log("OLD:" + jsonObjOld.contentData.lastDeliveryDate); console.log("OLD:" + jsonObjOld.contentData.lastDeliveryDate);
console.log("NEW:" + data.contentData.lastDeliveryDate); console.log("NEW:" + data.contentData.lastDeliveryDate);
if( jsonObjOld.contentData.lastDeliveryDate != data.contentData.lastDeliveryDate ){ if( jsonObjOld.contentData.lastDeliveryDate != data.contentData.lastDeliveryDate ){
console.log("違う"); console.log("Update Content.");
//ディレクトリ消し
//ディレクトリ消し
CONTENTVIEW_FILESYSTEM.fs.root.getDirectory( CONTENTVIEW_FILESYSTEM.fs.root.getDirectory(
'/abook/' + contentId, '/abook/' + contentId,
{}, {},
...@@ -162,9 +168,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -162,9 +168,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
fileWriter.onwriteend = function(e) { fileWriter.onwriteend = function(e) {
console.log('JSON書き込み完了'); console.log('JSON書き込み完了');
//ファンクション実行 //おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++; nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data); func(data);
}
}; };
fileWriter.onerror = function(e) { fileWriter.onerror = function(e) {
...@@ -190,10 +199,16 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -190,10 +199,16 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
); );
} else { } else {
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++; nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data); func(data);
} }
}
}; };
reader.readAsText(file); reader.readAsText(file);
} }
...@@ -202,8 +217,7 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -202,8 +217,7 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
function(err){ // 失敗時のコールバック関数 function(err){ // 失敗時のコールバック関数
console.log("NotRead json.txt"); console.log("NotRead json.txt");
//書き込む //書き込む パス作成
//パス作成
//var path = "/abook/" + contentId + "/" + fileName; //var path = "/abook/" + contentId + "/" + fileName;
CONTENTVIEW_FILESYSTEM.fs.root.getDirectory( CONTENTVIEW_FILESYSTEM.fs.root.getDirectory(
'/abook/' + contentId, '/abook/' + contentId,
...@@ -219,9 +233,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -219,9 +233,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
fileWriter.onwriteend = function(e) { fileWriter.onwriteend = function(e) {
console.log('JSON書き込み完了'); console.log('JSON書き込み完了');
//ファンクション実行 //おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++; nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data); func(data);
}
}; };
fileWriter.onerror = function(e) { fileWriter.onerror = function(e) {
...@@ -245,6 +262,92 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) { ...@@ -245,6 +262,92 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
}; };
CONTENTVIEW_FILESYSTEM.showVideoObjectCache = function(x, y, width, height, src, isFullscreen, contentId, resourceId ){
console.log('CONTENTVIEW_FILESYSTEM.showVideoObjectCache');
if (!CONTENTVIEW_FILESYSTEM.fs) {
console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId);
showVideoObject(x, y, width, height, src, isFullscreen, true);
return;
}
//キャッシュが存在するか確認
var fileName = contentID + "/res_" + resourceId + ".dat";
CONTENTVIEW_FILESYSTEM.fs.root.getFile('/abook/' + fileName, { create: false },
function(fileEntry){
fileEntry.file(
function(file){
console.log("read cache")
var url = window.URL || window.webkitURL;
var resSrc = url.createObjectURL(file);
showVideoObject(x, y, width, height, resSrc, isFullscreen, false);
}
);
},
function(err){ // 失敗時のコールバック関数
console.log("NotRead FileSystem");
//キャッシュ化
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
CONTENTVIEW_FILESYSTEM.isXhrBusy = false;
$('#divImageLoading').css('display', 'none');
//this.response is what you're looking for
console.log(this.response, typeof this.response);
CONTENTVIEW_FILESYSTEM.fs.root.getFile(
'/abook/' + fileName,
{create: true},
function(fileEntry){
fileEntry.createWriter(
function(fileWriter) {
fileWriter.onwriteend = function(e) {
console.log('RES書き込み完了');
};
fileWriter.onerror = function(e) {
console.log('RES書き込みエラー: ' + e.toString());
};
var blobData = new Blob([xhr.response], {type:"application/octet-stream"});
//var blobData = new Blob([this.response], {type:"video/mp4"});
fileWriter.write(blobData);
}
);
},
CONTENTVIEW_FILESYSTEM.errorHandler
);
} else {
if( this.readyState == 2 ){
$('#divImageLoading').css('display', 'block');
}
console.log("onreadystatechange:" + this.readyState + " " + this.status);
}
}
if( !CONTENTVIEW_FILESYSTEM.isXhrBusy ){
xhr.open('GET', src);
xhr.responseType = 'blob';
xhr.send();
CONTENTVIEW_FILESYSTEM.isXhrBusy = true;
} else {
console.log("xhr is busy.");
}
//タグは書き出し
showVideoObject(x, y, width, height, src, isFullscreen, true);
}
);
}
CONTENTVIEW_FILESYSTEM.errorHandler = function(e) { CONTENTVIEW_FILESYSTEM.errorHandler = function(e) {
var msg = ''; var msg = '';
switch (e.code) { switch (e.code) {
...@@ -268,6 +371,6 @@ CONTENTVIEW_FILESYSTEM.errorHandler = function(e) { ...@@ -268,6 +371,6 @@ CONTENTVIEW_FILESYSTEM.errorHandler = function(e) {
break; break;
}; };
//CONTENTVIEW_FILESYSTEM.fs = null; //CONTENTVIEW_FILESYSTEM.fs = null;
alert('Error: ' + msg); alert('FileSystemAPI Error: ' + msg);
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment