マルチ動画ビフォーアフター比較システム

マルチ動画比較システム V5

動画録画・設定保存対応 | ズーム＆パン機能搭載

設定の保存・読込

動画録画（グリッド全体を録画）

録画中00:00

※ 録画中はグリッド全体がキャプチャされます。速度変換も反映されます。

レイアウト選択

再生モード選択

現在再生中: 動画 1

マスターコントロール

0:000:00

再生速度1.00x

区間別速度設定

';return'"}function k(a){return'

'+(a+1)+'

動画 '+(a+1)+'

1.0x

タップで選択動画をアップロード

速度1.00x

'}function l(a,b){return'

'+(b+1)+'

開始

終了

x

'}function m(){var a=[];for(var b=0;b0&&(c.segments=a.segments,O()),a.zoom&&a.zoom.forEach(function(a,b){a&&c.zoomStates[b]&&(c.zoomStates[b].scale=a.scale||1,c.zoomStates[b].translateX=a.translateX||0,c.zoomStates[b].translateY=a.translateY||0,w(b))})},100))}function q(){var b=d.grid,e=b.getBoundingClientRect(),f=Math.floor(e.width),h=Math.floor(e.height);d.recordCanvas.width=f,d.recordCanvas.height=h;var j=d.recordCanvas.getContext("2d"),k=d.recordCanvas.captureStream(a.recordFPS),l="video/webm;codecs=vp9";MediaRecorder.isTypeSupported(l)||(l="video/webm;codecs=vp8",MediaRecorder.isTypeSupported(l)||(l="video/webm")),c.mediaRecorder=new MediaRecorder(k,{mimeType:l,videoBitsPerSecond:a.recordBitrate}),c.recordedChunks=[],c.mediaRecorder.ondataavailable=function(a){a.data.size>0&&c.recordedChunks.push(a.data)},c.mediaRecorder.onstop=function(){var a=new Blob(c.recordedChunks,{type:l}),b=URL.createObjectURL(a),d=document.createElement("a");d.href=b,d.download="getta-recording-"+(new Date).toISOString().slice(0,19).replace(/[T:]/g,"-")+".webm",document.body.appendChild(d),d.click(),document.body.removeChild(d),setTimeout(function(){URL.revokeObjectURL(b)},1e3),i("録画を保存しました","success")},c.mediaRecorder.start(100),c.isRecording=!0,c.recordStartTime=Date.now(),d.startRecord.style.display="none",d.stopRecord.style.display="flex",d.stopRecord.classList.add("getta-mvcs-recording"),d.recordingStatus.classList.add("getta-mvcs-visible"),r(j,b,f,h),i("録画を開始しました","success")}function r(a,b,e,f){if(c.isRecording){var h=Date.now()-c.recordStartTime;d.recordingTime.textContent=g(h),a.fillStyle="#ffffff",a.fillRect(0,0,e,f);var i=b.querySelectorAll(".getta-mvcs-video-card"),j=b.getBoundingClientRect();i.forEach(function(b){var d=b.querySelector(".getta-mvcs-video"),e=b.querySelector(".getta-mvcs-video-wrapper");if(d&&d.src&&d.readyState>=2){var f=e.getBoundingClientRect(),g=f.left-j.left,h=f.top-j.top,i=f.width,k=f.height,l=parseInt(b.getAttribute("data-index")),m=c.zoomStates[l]||{scale:1,translateX:0,translateY:0};a.save(),a.beginPath(),a.rect(g,h,i,k),a.clip();var n=g+i/2,o=h+k/2;a.translate(n,o),a.scale(m.scale,m.scale),a.translate(-n+m.translateX,-o+m.translateY);var p,q,r,s,t=d.videoWidth/d.videoHeight,u=i/k;t>u?(p=i,q=i/t,r=g,s=h+(k-q)/2):(q=k,p=k*t,r=g+(i-p)/2,s=h),a.drawImage(d,r,s,p,q),a.restore()}}),i.forEach(function(b){var c=b.getBoundingClientRect(),d=c.left-j.left,e=c.top-j.top,f=c.width,g=c.height;a.fillStyle="#f8fafc",a.fillRect(d,e,f,28);var h=parseInt(b.getAttribute("data-index"));a.fillStyle="#0891b2",a.font="bold 12px sans-serif",a.fillText("動画 "+(h+1),d+10,e+18),a.strokeStyle="rgba(8,145,178,0.2)",a.lineWidth=2,a.strokeRect(d,e,f,g)}),c.recordAnimationFrame=requestAnimationFrame(function(){r(a,b,e,f)})}}function s(){c.isRecording&&(c.isRecording=!1,c.recordAnimationFrame&&cancelAnimationFrame(c.recordAnimationFrame),c.mediaRecorder&&"inactive"!==c.mediaRecorder.state&&c.mediaRecorder.stop(),d.startRecord.style.display="flex",d.stopRecord.style.display="none",d.stopRecord.classList.remove("getta-mvcs-recording"),d.recordingStatus.classList.remove("getta-mvcs-visible"))}function t(){c.seqOrder=[];var a=c.videoCount,b=c.layoutCols,d=Math.ceil(a/b);if("seq-lr"===c.playbackMode||"seq-loop"===c.playbackMode)for(var e=0;e0&&J(a.target.files[0],b)}}),document.querySelectorAll(".getta-mvcs-upload-zone").forEach(function(a){a.onclick=function(a){a.preventDefault(),a.stopPropagation();var b=this.getAttribute("data-index");document.querySelector('.getta-mvcs-file-input[data-index="'+b+'"]').click()},a.ondragover=function(a){a.preventDefault(),this.classList.add("getta-mvcs-dragover")},a.ondragleave=function(){this.classList.remove("getta-mvcs-dragover")},a.ondrop=function(a){a.preventDefault(),this.classList.remove("getta-mvcs-dragover");var b=parseInt(this.getAttribute("data-index"));a.dataTransfer.files.length>0&&J(a.dataTransfer.files[0],b)}}),document.querySelectorAll(".getta-mvcs-speed-mini-slider").forEach(function(a){a.oninput=function(){var a=parseInt(this.getAttribute("data-index"));K(a,parseFloat(this.value))}}),document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.ontimeupdate=M,a.onloadedmetadata=function(){var a=0;document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.duration&&b.duration>a&&(a=b.duration)}),d.totalTime.textContent=f(a)},a.onended=function(a){var b=parseInt(a.target.getAttribute("data-index"));"sync"===c.playbackMode?(c.isPlaying=!1,I()):c.seqOrder[c.seqCurrentIndex]===b&&(c.seqCurrentIndex++,c.seqCurrentIndex>=c.seqOrder.length?"seq-loop"===c.playbackMode?(c.seqCurrentIndex=0,W()):(c.isPlaying=!1,c.seqCurrentIndex=0,I(),u()):W())}})}function H(){document.querySelectorAll(".getta-mvcs-video-wrapper").forEach(function(b){var d=parseInt(b.getAttribute("data-index"));b.onwheel=function(b){b.preventDefault();var c=b.deltaY>0?-a.zoomStep:a.zoomStep;x(d,c,b.clientX,b.clientY)},b.onmousedown=function(a){if(!a.target.closest(".getta-mvcs-upload-zone")&&!a.target.closest(".getta-mvcs-zoom-btn")){a.preventDefault();var b=c.zoomStates[d];b&&b.scale>1&&(b.isDragging=!0,b.startX=a.clientX-b.translateX*b.scale,b.startY=a.clientY-b.translateY*b.scale)}},b.onmousemove=function(a){var b=c.zoomStates[d];b&&b.isDragging&&(b.translateX=(a.clientX-b.startX)/b.scale,b.translateY=(a.clientY-b.startY)/b.scale,y(d),w(d))},b.onmouseup=function(){var a=c.zoomStates[d];a&&(a.isDragging=!1)},b.onmouseleave=function(){var a=c.zoomStates[d];a&&(a.isDragging=!1)},b.ondblclick=function(a){a.target.closest(".getta-mvcs-upload-zone")||a.target.closest(".getta-mvcs-zoom-btn")||z(d)},b.ontouchstart=function(a){if(!a.target.closest(".getta-mvcs-upload-zone")&&!a.target.closest(".getta-mvcs-zoom-btn")){var b=c.zoomStates[d];b&&(2===a.touches.length?(a.preventDefault(),b.lastTouchDistance=B(a.touches)):1===a.touches.length&&b.scale>1&&(b.isDragging=!0,b.startX=a.touches[0].clientX-b.translateX*b.scale,b.startY=a.touches[0].clientY-b.translateY*b.scale))}},b.ontouchmove=function(a){if(!a.target.closest(".getta-mvcs-upload-zone")&&!a.target.closest(".getta-mvcs-zoom-btn")){var b=c.zoomStates[d];b&&(2===a.touches.length?(a.preventDefault(),x(d,.01*(B(a.touches)-b.lastTouchDistance),C(a.touches).x,C(a.touches).y),b.lastTouchDistance=B(a.touches)):1===a.touches.length&&b.isDragging&&(a.preventDefault(),b.translateX=(a.touches[0].clientX-b.startX)/b.scale,b.translateY=(a.touches[0].clientY-b.startY)/b.scale,y(d),w(d)))}},b.ontouchend=function(){var a=c.zoomStates[d];a&&(a.isDragging=!1,a.lastTouchDistance=0)}}),document.querySelectorAll(".getta-mvcs-zoom-btn").forEach(function(b){b.onclick=function(b){b.preventDefault(),b.stopPropagation();var c=this.getAttribute("data-action"),d=parseInt(this.getAttribute("data-index")),e=document.querySelector('.getta-mvcs-video-wrapper[data-index="'+d+'"]').getBoundingClientRect(),f=e.left+e.width/2,g=e.top+e.height/2;"zoom-in"===c?x(d,2*a.zoomStep,f,g):"zoom-out"===c?x(d,-2*a.zoomStep,f,g):"zoom-reset"===c&&z(d)}})}function J(a,b){var d=document.querySelector('.getta-mvcs-video[data-index="'+b+'"]'),e=document.querySelector('.getta-mvcs-upload-zone[data-index="'+b+'"]'),f=URL.createObjectURL(a);d.src=f,d.load(),e.style.display="none",c.videos[b]={element:d,speed:c.globalSpeed,loaded:!0},d.playbackRate=c.globalSpeed}function K(a,b){var d=document.querySelector('.getta-mvcs-video[data-index="'+a+'"]'),e=document.querySelector('.getta-mvcs-speed-mini-value[data-index="'+a+'"]'),f=document.querySelector('.getta-mvcs-speed-mini-slider[data-index="'+a+'"]');d&&(d.playbackRate=b),e&&(e.textContent=b.toFixed(2)+"x"),f&&(f.value=b),c.videos[a]&&(c.videos[a].speed=b)}function L(a){c.globalSpeed=a,d.globalSpeedValue.textContent=a.toFixed(2)+"x",d.globalSpeedSlider.value=a,document.querySelectorAll(".getta-mvcs-speed-preset").forEach(function(b){b.classList.toggle("getta-mvcs-active",Math.abs(parseFloat(b.getAttribute("data-speed"))-a)<.01 b="0;b<c.videoCount;b++)K(b,a)}function" m>0&&(d.progressFill.style.width=g/h*100+"%",d.currentTime.textContent=f(g)):c.seqOrder[c.seqCurrentIndex]===e&&h>0&&(d.progressFill.style.width=g/h*100+"%",d.currentTime.textContent=f(g)),c.useSegments&&c.isPlaying&&T(g)}function I(){d.playIcon.style.display=c.isPlaying?"none":"block",d.pauseIcon.style.display=c.isPlaying?"block":"none"}function N(a){c.playbackMode=a,c.seqCurrentIndex=0,document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&(a.pause(),a.currentTime=0)}),c.isPlaying=!1,t(),document.querySelectorAll(".getta-mvcs-mode-btn").forEach(function(b){b.classList.toggle("getta-mvcs-active",b.getAttribute("data-mode")===a)}),I(),u();var b=0;document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.duration&&a.duration>b&&(b=a.duration)}),d.totalTime.textContent=f(b)}function O(){var a="";c.segments.forEach(function(b,c){a+=l(b,c)}),d.segmentList.innerHTML=a,document.querySelectorAll(".getta-mvcs-segment-delete").forEach(function(a){a.onclick=function(a){a.preventDefault(),a.stopPropagation(),P(parseInt(this.getAttribute("data-index")))}}),document.querySelectorAll(".getta-mvcs-segment-input,.getta-mvcs-segment-speed-input").forEach(function(a){a.onchange=Q})}function P(a){c.segments.length>1&&(c.segments.splice(a,1),O())}function Q(a){var b=a.target.closest(".getta-mvcs-segment"),d=parseInt(b.getAttribute("data-index"));c.segments[d]={start:parseFloat(b.querySelector(".getta-mvcs-segment-start").value)||0,end:parseFloat(b.querySelector(".getta-mvcs-segment-end").value)||0,speed:parseFloat(b.querySelector(".getta-mvcs-segment-speed-val").value)||1}}function R(){var a=c.segments[c.segments.length-1],b=a?a.end:0;c.segments.push({start:b,end:b+10,speed:1}),O()}function S(){c.useSegments=!0,c.currentSegmentIndex=0;var a=c.segments[0];document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.src&&(b.currentTime=a.start,b.playbackRate=a.speed)}),L(a.speed),c.isPlaying=!0,I(),"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&a.play()}):W()}function T(a){if(c.useSegments&&!(c.currentSegmentIndex=b.end){if(c.currentSegmentIndex++,c.currentSegmentIndex>=c.segments.length)return c.useSegments=!1,c.currentSegmentIndex=-1,c.isPlaying=!1,document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&a.pause()}),void I();var d=c.segments[c.currentSegmentIndex];document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&(a.currentTime=d.start,a.playbackRate=d.speed)}),L(d.speed)}}}function U(){c.isPlaying=!c.isPlaying,"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&(c.isPlaying?a.play():a.pause())}):c.isPlaying?W():document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&a.pause()}),I(),u()}function V(b){if("sync"===c.playbackMode)document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&a.duration&&(a.currentTime=h(a.currentTime+b,0,a.duration))});else{var d=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');d&&d.src&&d.duration&&(d.currentTime=h(d.currentTime+b,0,d.duration))}}function W(){var a=c.seqOrder[c.seqCurrentIndex],b=document.querySelector('.getta-mvcs-video[data-index="'+a+'"]');b&&b.src?(b.currentTime=0,b.play(),u(),d.totalTime.textContent=f(b.duration)):(c.seqCurrentIndex++,c.seqCurrentIndex>=c.seqOrder.length?"seq-loop"===c.playbackMode?(c.seqCurrentIndex=0,W()):(c.isPlaying=!1,c.seqCurrentIndex=0,I(),u()):W())}function X(){document.querySelectorAll(".getta-mvcs-type-tab").forEach(function(a){a.onclick=function(a){a.preventDefault(),a.stopPropagation(),c.layoutType=this.getAttribute("data-type"),document.querySelectorAll(".getta-mvcs-type-tab").forEach(function(a){a.classList.toggle("getta-mvcs-active",a.getAttribute("data-type")===c.layoutType)}),D(c.layoutType)}}),document.querySelectorAll(".getta-mvcs-mode-btn").forEach(function(a){a.onclick=function(a){a.preventDefault(),a.stopPropagation(),N(this.getAttribute("data-mode"))}}),d.playPause.onclick=function(a){a.preventDefault(),a.stopPropagation(),U()},document.getElementById("gettaMvcsRewind").onclick=function(b){b.preventDefault(),b.stopPropagation(),V(-a.seekStep)},document.getElementById("gettaMvcsForward").onclick=function(b){b.preventDefault(),b.stopPropagation(),V(a.seekStep)},document.getElementById("gettaMvcsStepBack").onclick=function(b){b.preventDefault(),b.stopPropagation(),"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime-a.frameStep,0,b.duration))}):function(){var b=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');b&&b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime-a.frameStep,0,b.duration))}(),c.isPlaying=!1,I()},document.getElementById("gettaMvcsStepForward").onclick=function(b){b.preventDefault(),b.stopPropagation(),"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime+a.frameStep,0,b.duration))}):function(){var b=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');b&&b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime+a.frameStep,0,b.duration))}(),c.isPlaying=!1,I()},d.progressBar.onclick=function(a){a.preventDefault(),a.stopPropagation();var b=d.progressBar.getBoundingClientRect(),e=h((a.clientX-b.left)/b.width,0,1);"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&a.duration&&(a.currentTime=a.duration*e)}):function(){var a=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');a&&a.src&&a.duration&&(a.currentTime=a.duration*e)}()},d.resetAll.onclick=function(a){a.preventDefault(),a.stopPropagation(),document.querySelectorAll(".getta-mvcs-video").forEach(function(a){a.src&&(a.pause(),a.currentTime=0)}),c.isPlaying=!1,c.useSegments=!1,c.currentSegmentIndex=-1,c.seqCurrentIndex=0,I(),u(),d.progressFill.style.width="0%",d.currentTime.textContent="0:00",L(1),A()},d.resetZoom.onclick=function(a){a.preventDefault(),a.stopPropagation(),A()},d.addSegment.onclick=function(a){a.preventDefault(),a.stopPropagation(),R()},d.applySegments.onclick=function(a){a.preventDefault(),a.stopPropagation(),S()},d.globalSpeedSlider.oninput=function(){L(parseFloat(this.value))},document.querySelectorAll(".getta-mvcs-speed-preset").forEach(function(a){a.onclick=function(a){a.preventDefault(),a.stopPropagation(),L(parseFloat(this.getAttribute("data-speed")))}}),d.saveSettings.onclick=function(a){a.preventDefault(),a.stopPropagation(),n()},d.loadSettings.onclick=function(a){a.preventDefault(),a.stopPropagation(),d.settingsInput.click()},d.settingsInput.onchange=function(a){a.target.files.length>0&&(o(a.target.files[0]),a.target.value="")},d.startRecord.onclick=function(a){a.preventDefault(),a.stopPropagation(),q()},d.stopRecord.onclick=function(a){a.preventDefault(),a.stopPropagation(),s()},document.onkeydown=function(b){if("INPUT"!==b.target.tagName)switch(b.code){case"Space":b.preventDefault(),U();break;case"ArrowLeft":b.preventDefault(),b.shiftKey?function(){"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime-a.frameStep,0,b.duration))}):function(){var b=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');b&&b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime-a.frameStep,0,b.duration))}(),c.isPlaying=!1,I()}():V(-a.seekStep);break;case"ArrowRight":b.preventDefault(),b.shiftKey?function(){"sync"===c.playbackMode?document.querySelectorAll(".getta-mvcs-video").forEach(function(b){b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime+a.frameStep,0,b.duration))}):function(){var b=document.querySelector('.getta-mvcs-video[data-index="'+c.seqOrder[c.seqCurrentIndex]+'"]');b&&b.src&&b.duration&&(b.pause(),b.currentTime=h(b.currentTime+a.frameStep,0,b.duration))}(),c.isPlaying=!1,I()}():V(a.seekStep)}}}function Y(){e(),D("horizontal"),O(),X()}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",Y):Y(),window.onload=function(){d.grid&&d.grid.innerHTML||Y()},setTimeout(function(){d.grid&&d.grid.innerHTML||Y()},100)}();

Copyright © 2010