Skip to content

C
check
Commit 999c601a by Masaru Abe
Options

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

parent 4a385f13
Showing with 452 additions and 41 deletions
abvw/common/js/avweb.js
......@@ -631,7 +631,7 @@ function avwGrabContentPageImage(accountPath, params, success, error) {
//フィアルシステムが有効であればキャッシュ
if( CONTENTVIEW_FILESYSTEM.fs != null ){
var fileName = "page_" + params.pageNo + ".dat";
CONTENTVIEW_FILESYSTEM.saveFile(params.contentId, fileName, src);
CONTENTVIEW_FILESYSTEM.savePageFile(params.contentId, fileName, src);
}
if (success) {
......
abvw/js/contentview.js
......@@ -4955,7 +4955,7 @@ function showControlsVideo(target) {
};
/* 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 pt2 = imageToScreen(x + width, y + height);
......@@ -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, width, height);
if( !isFullscreen && isAddKey ){
src = src + '&key=' + (new Date()).toIdString();
}
if (isFullscreen === false) {
$('#playvideo').attr('z-order', '1000');
$('#playvideo').css('left', pt1.x + 'px');
......@@ -4979,8 +4983,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) {
'width="' + (pt2.x - pt1.x) + '" ' +
'height="' + (pt2.y - pt1.y) + '" ' +
'autoplay controls loop>' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' +
' <source src="' + src + '" type="video/mp4"> ' +
' <source src="' + src + '" type="video/ogg"> ' +
'</video>'
);
} else {
......@@ -4988,8 +4992,8 @@ function showVideoObject(x, y, width, height, src, isFullscreen) {
'width="' + (pt2.x - pt1.x) + '" ' +
'height="' + (pt2.y - pt1.y) + '" ' +
'autoplay controls>' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/mp4"> ' +
' <source src="' + src + '&key=' + (new Date()).toIdString() + '" type="video/ogg"> ' +
' <source src="' + src + '" type="video/mp4"> ' +
' <source src="' + src + '" type="video/ogg"> ' +
'</video>'
);
}
......
abvw/js/contentview_CreateObjects.js
......@@ -775,7 +775,10 @@ var trigger = function (mediaType, actionType, id, imageUrl, x, y, w, h, index,
objectLog.resourceId = objType4_5[nIndex].dataObjects[nIndex1].resourceId;
} else { /* video */
stopAllAudio();
showVideoObject(objType4_5[nIndex].x, objType4_5[nIndex].y, objType4_5[nIndex].width, objType4_5[nIndex].height, objType4_5[nIndex].dataObjects[nIndex1].fileName, false);
CONTENTVIEW_FILESYSTEM.showVideoObjectCache(objType4_5[nIndex].x, objType4_5[nIndex].y, objType4_5[nIndex].width, objType4_5[nIndex].height, objType4_5[nIndex].dataObjects[nIndex1].fileName, false, contentID, objType4_5[nIndex].dataObjects[nIndex1].resourceId);
//showVideoObject(objType4_5[nIndex].x, objType4_5[nIndex].y, objType4_5[nIndex].width, objType4_5[nIndex].height, objType4_5[nIndex].dataObjects[nIndex1].fileName, false);
//詳細ログ用 動画なのでダミーで１以上
objectLog.actionTime = "1";
//リソースID
......@@ -1374,30 +1377,196 @@ var videoType2 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visi
/*stop audio on page */
stopAllAudio();
if (embed == "1") {
showVideoObject(x, y, w, h, mediaFile, false);
CONTENTVIEW_FILESYSTEM.showVideoObjectCache(x, y, w, h, mediaFile, false, contentID, media );
//showVideoObject(x, y, w, h, mediaFile, false);
}
else {
if (media != '') {
$('#playvideo').children().remove();
//ファイルシステムが有効であればキャッシュ確認
if( CONTENTVIEW_FILESYSTEM.fs == null ){
//タグは書き出し
createVideoFulScreen(mediaFile, id);
$("#btnCloseVideo").click(function (e) {
//$("#btnCloseVideo").click(function (e) {
// //時間記録
// hideDialog();
// /*play audio if exist */
// playAllAudio();
//
//});
console.log("aaaaa");
$("#btnCloseVideo").on({
'click': function(){
//時間記録
hideDialog();
/*play audio if exist */
playAllAudio();
},
'touchstart': function(){
console.log("touchstart");
},
'touchmove': function(){
console.log("touchmove");
},
'touchend': function(){
console.log("touchend");
//時間記録
hideDialog();
/*play audio if exist */
playAllAudio();
}
});
showDialog(true);
} else {
//キャッシュが存在するか確認
var fileName = contentID + "/res_" + media + ".dat";
CONTENTVIEW_FILESYSTEM.fs.root.getFile('/abook/' + fileName, { create: false },
function(fileEntry){
fileEntry.file(
function(file){
var url = window.URL || window.webkitURL;
var resSrc = url.createObjectURL(file);
console.log("read cache: createObjectURL " + resSrc);
createVideoFulScreen(resSrc, id);
//$("#btnCloseVideo").click(function (e) {
// //時間記録
// hideDialog();
// /*play audio if exist */
// playAllAudio();
//
//});
console.log("bbbbbb");
$("#btnCloseVideo").on({
'click touchend': function(ev){
console.log("#btnCloseVideo click touchend");
//時間記録
hideDialog();
/*play audio if exist */
playAllAudio();
return false;
},
'touchstart touchmove': function(){
//これを入れないと次にダイアログを開くと表示位置が大きくズレる
console.log("#btnCloseVideo touchstart touchmove");
return false;
}
});
showDialog(true);
}
);
},
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('z-index', '99999');
$('#divImageLoading').css('display', 'block');
}
console.log("onreadystatechange:" + this.readyState + " " + this.status);
}
}
if( !CONTENTVIEW_FILESYSTEM.isXhrBusy ){
xhr.open('GET', mediaFile);
xhr.responseType = 'blob';
xhr.send();
CONTENTVIEW_FILESYSTEM.isXhrBusy = true;
} else {
console.log("xhr is busy.");
}
//タグは書き出し
createVideoFulScreen(mediaFile, id);
$("#btnCloseVideo").click(function (e) {
//時間記録
hideDialog();
/*play audio if exist */
playAllAudio();
});
showDialog(true);
}
);
}
//createVideoFulScreen(mediaFile, id);
//$("#btnCloseVideo").click(function (e) {
// //時間記録
// hideDialog();
// /*play audio if exist */
// playAllAudio();
//});
//showDialog(true);
}
}
};
};
//キャッシュ対応で非同期になった対応
function videoType2CreateVideoFulScreenAfterFunc(){
$("#btnCloseVideo").click(function (e) {
//時間記録
hideDialog();
/*play audio if exist */
playAllAudio();
});
showDialog(true);
}
videoType2.prototype = new PageObject();
/* mediaType = 1 and actionType = 0 linkURL object*/
......@@ -1438,30 +1607,149 @@ var videoType1 = function (mediaType, actionType, id, imageUrl, x, y, w, h, visi
/* stop all audio on page */
stopAllAudio();
createVideoFulScreen(mediaFile, id);
//ファイルシステムが有効であればキャッシュ確認
if( CONTENTVIEW_FILESYSTEM.fs == null ){
//タグは書き出し
createVideoFulScreen(mediaFile, id);
$("#btnCloseVideo").click(function (e) {
//時間記録
var dateEnd = new Date();
var actionTime = dateEnd.subtractBySeconds(dateStart);
//alert("actionTime:" + actionTime);
SetObjectLogActionTime( contentID, objectId, actionTime );
hideDialog();
/* play audio */
playAllAudio();
});
showDialog(true);
} else {
//キャッシュが存在するか確認
var fileName = contentID + "/res_" + mediaResourceId + ".dat";
CONTENTVIEW_FILESYSTEM.fs.root.getFile('/abook/' + fileName, { create: false },
function(fileEntry){
fileEntry.file(
function(file){
var url = window.URL || window.webkitURL;
var resSrc = url.createObjectURL(file);
console.log("read cache: createObjectURL " + resSrc);
//タグは書き出し
createVideoFulScreen(resSrc, id);
$("#btnCloseVideo").click(function (e) {
//時間記録
var dateEnd = new Date();
var actionTime = dateEnd.subtractBySeconds(dateStart);
//alert("actionTime:" + actionTime);
SetObjectLogActionTime( contentID, objectId, actionTime );
hideDialog();
/* play audio */
playAllAudio();
});
showDialog(true);
}
);
},
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 {
console.log("onreadystatechange:" + this.readyState + " " + this.status);
if( this.readyState == 2 ){
$('#divImageLoading').css('z-index', '99999');
$('#divImageLoading').css('display', 'block');
}
}
}
if( !CONTENTVIEW_FILESYSTEM.isXhrBusy ){
xhr.open('GET', mediaFile);
xhr.responseType = 'blob';
xhr.send();
CONTENTVIEW_FILESYSTEM.isXhrBusy = true;
} else {
console.log("xhr is busy.");
}
//タグは書き出し
createVideoFulScreen(mediaFile, id);
$("#btnCloseVideo").click(function (e) {
//時間記録
var dateEnd = new Date();
var actionTime = dateEnd.subtractBySeconds(dateStart);
//alert("actionTime:" + actionTime);
SetObjectLogActionTime( contentID, objectId, actionTime );
hideDialog();
/* play audio */
playAllAudio();
});
showDialog(true);
}
);
}
//createVideoFulScreen(mediaFile, id);
//$("#btnCloseVideo").click(function (e) {
// //時間記録
// var dateEnd = new Date();
// var actionTime = dateEnd.subtractBySeconds(dateStart);
// //alert("actionTime:" + actionTime);
// SetObjectLogActionTime( contentID, objectId, actionTime );
// hideDialog();
// /* play audio */
// playAllAudio();
//});
//showDialog(true);
}
//時間記録
var dateStart = new Date();
};
};
function videoType1CreateVideoFulScreenAfterFunc(){
};
videoType1.prototype = new PageObject();
/* mediaType=1 and actionType = 2 Audio object : extends PageObject */
......@@ -2199,6 +2487,9 @@ function createImagePreview() {
/* create video on page */
function createVideoFulScreen(video, id) {
console.log('createVideoFulScreen');
$('#dialog').css('box-shadow', '0px 0px 3px 1px #666');
$('#dialog').css('border', 'solid 1px #666');
$('#dialog').draggable({ handle: "h1" });
......
abvw/js/contentview_Events.js
......@@ -868,6 +868,8 @@ function onUnlock() {
function onClick_CanvasMain(event) {
console.log("onClick_CanvasMain");
event.preventDefault();
if(isLoadingObject){
......@@ -1493,6 +1495,8 @@ function resetNaviAction(){
function onTouchstart(evt){
console.log("onTouchstart _isClick:" + _isClick);
//evt.preventDefault();
if(ClientData.IsAddingMarking() == true){
......@@ -1540,7 +1544,6 @@ function onTouchstart(evt){
_touchFirstPos = null;
if(_bWin8TouchEnabled){
_bufferPoints = [];
if(_startPoints.length == 0){
// start navi page case
......@@ -1728,6 +1731,8 @@ var isPreventClick = false;
function onTouchmove(evt){
console.log("onTouchmove isClick:" + _isClick);
//evt.preventDefault();
if(ClientData.IsAddingMarking() == true){
......@@ -1931,11 +1936,15 @@ function onTouchmove(evt){
}
}
else{
_isClick = false;
//_isClick = false;
// for android or ipad
touch1 = evt.touches[0];
touch2 = evt.touches[1];
if( touch2 != null ){
_isClick = false;
}
if(_3dAnimate){
var imagePt = screenToImage(touch1.pageX, touch1.pageY);
......@@ -2006,6 +2015,8 @@ function onTouchmove(evt){
function onTouchend(evt){
console.log("onTouchend isClick:" + _isClick);
//evt.preventDefault();
if(ClientData.IsAddingMarking() == true){
......@@ -2080,8 +2091,10 @@ function onTouchend(evt){
touchStartedTime= 0;
if(_moveNum == 2){
nextPage_click();
return;
}else if (_moveNum == -2){
prevPage_click();
return;
}else {
correctCanvasPosition();
}
......
abvw/js/contentview_FileSystem.js
......@@ -2,16 +2,10 @@
//名前空間用のオブジェクトを用意する
var CONTENTVIEW_FILESYSTEM = {};
$(function () {
CONTENTVIEW_FILESYSTEM.isXhrBusy = false;
//CONTENTVIEW_FILESYSTEM.fs = null;
//window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//// Initiate filesystem on page load.
//if (window.requestFileSystem) {
// CONTENTVIEW_FILESYSTEM.initFS();
//}
});
//$(function () {
//});
CONTENTVIEW_FILESYSTEM.initFS = function( func ) {
......@@ -32,21 +26,32 @@ CONTENTVIEW_FILESYSTEM.initFS = function( func ) {
function(filesystem) {
console.log("initFS window.requestFileSystem");
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 ){
func();
}
},
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) {
console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId);
return;
}
......@@ -56,7 +61,7 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) {
'/abook/' + contentId,
{create: true},
function(dirEntry) {
// /abook/contentId ディレクトリ作成成功
CONTENTVIEW_FILESYSTEM.fs.root.getFile(
'/abook/' + contentId + "/" + fileName,
{create: true},
......@@ -71,10 +76,6 @@ CONTENTVIEW_FILESYSTEM.saveFile = function(contentId, fileName, data) {
};
var blobData = new Blob([data], {type:"text/plain"});
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) {
if (!CONTENTVIEW_FILESYSTEM.fs) {
console.log('CONTENTVIEW_FILESYSTEM.fs is null. id=' + contentId);
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++;
//ファンクションがあれば実行
if( func != null ){
func(data);
}
return;
}
//既に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){
fileEntry.file(
function(file){
var reader = new FileReader();
reader.onloadend = function(e) {
console.log("read Json.txt");
//console.log(e.target.result);
//JSONに戻す
var jsonObjOld = JSON.parse(e.target.result);
......@@ -136,9 +142,9 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
console.log("OLD:" + jsonObjOld.contentData.lastDeliveryDate);
console.log("NEW:" + data.contentData.lastDeliveryDate);
if( jsonObjOld.contentData.lastDeliveryDate != data.contentData.lastDeliveryDate ){
console.log("違う");
//ディレクトリ消し
console.log("Update Content.");
//ディレクトリ消し
CONTENTVIEW_FILESYSTEM.fs.root.getDirectory(
'/abook/' + contentId,
{},
......@@ -162,9 +168,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
fileWriter.onwriteend = function(e) {
console.log('JSON書き込み完了');
//ファンクション実行
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data);
}
};
fileWriter.onerror = function(e) {
......@@ -190,10 +199,16 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
);
} else {
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data);
}
}
};
reader.readAsText(file);
}
......@@ -202,8 +217,7 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
function(err){ // 失敗時のコールバック関数
console.log("NotRead json.txt");
//書き込む
//パス作成
//書き込む パス作成
//var path = "/abook/" + contentId + "/" + fileName;
CONTENTVIEW_FILESYSTEM.fs.root.getDirectory(
'/abook/' + contentId,
......@@ -219,9 +233,12 @@ CONTENTVIEW_FILESYSTEM.checkUpdate = function(contentId, data, func) {
fileWriter.onwriteend = function(e) {
console.log('JSON書き込み完了');
//ファンクション実行
//おまじない ajaxカウントをインクリする必要有り
nAjaxLoad++;
//ファンクション実行
if( func != null ){
func(data);
}
};
fileWriter.onerror = function(e) {
......@@ -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) {
var msg = '';
switch (e.code) {
......@@ -268,6 +371,6 @@ CONTENTVIEW_FILESYSTEM.errorHandler = function(e) {
break;
};
//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