/************************************************************** * 動画再生に関する処理 **************************************************************/ DugaAdCustom = function (objProductData, objColors, objConfig) { // 変数の設定 var strClientCareer = getClientCareer(); var blnVerticalMode = (objConfig['csswidth'] == "240" && objConfig['cssheight'] == "295") ? true : false; if (blnVerticalMode) { var intVideoHeight = 295; var intVideoWidth = 240; } else { var intVideoHeight = 180; var intVideoWidth = 420; } // 色設定 var colorTitleActive = objColors['txtcolor1']; var colorTitleNormal = objColors['txtcolor2']; var colorTableBg = objColors['tablecolor1']; //---------------------------------------------------------- // レイアウトの作成 //---------------------------------------------------------- var objAdCustom = document.createElement("div"); objAdCustom.style.position = 'relative'; objAdCustom.style.width = intVideoWidth + 'px'; objAdCustom.style.height = intVideoHeight + 'px'; document.body.appendChild(objAdCustom); // 動画マスク var objVideoPlayerMask = document.createElement("div"); objVideoPlayerMask.style.position = 'absolute'; objVideoPlayerMask.style.top = 0 + 'px'; objVideoPlayerMask.style.left = 0 + 'px'; objVideoPlayerMask.style.width = 240 + 'px'; objVideoPlayerMask.style.height = 180 + 'px'; objVideoPlayerMask.style.overflow = 'hidden'; objAdCustom.appendChild(objVideoPlayerMask); // 動画プレーヤ var objVideoPlayerTag = document.createElement("video"); objVideoPlayerTag.volume = 0; objVideoPlayerTag.muted = true; objVideoPlayerTag.autoplay = true; objVideoPlayerTag.style.position = 'absolute'; objVideoPlayerTag.style.top = 0 + 'px'; objVideoPlayerTag.style.left = 0 + 'px'; objVideoPlayerMask.appendChild(objVideoPlayerTag); // 静止画領域 var objVideoPosterArea = document.createElement("div"); objVideoPosterArea.style.position = 'absolute'; objVideoPosterArea.style.top = 0 + 'px'; objVideoPosterArea.style.left = 0 + 'px'; objVideoPosterArea.style.background = '#000000'; var objVideoPosterImg = new Image(); objVideoPosterArea.appendChild(objVideoPosterImg); objVideoPlayerMask.appendChild(objVideoPosterArea); // 動画再生領域 var objVideoPlayerArea = document.createElement("div"); objVideoPlayerArea.style.position = 'absolute'; objVideoPlayerArea.style.top = 0 + 'px'; objVideoPlayerArea.style.left = 0 + 'px'; objVideoPlayerArea.style.width = 240 + 'px'; objAdCustom.appendChild(objVideoPlayerArea); // タイトル背景 var objVideoTitleBg = document.createElement("div"); objVideoTitleBg.style.position = 'absolute'; objVideoTitleBg.style.top = 0 + 'px'; objVideoTitleBg.style.left = 0 + 'px'; objVideoTitleBg.style.height = 19 + 'px'; objVideoTitleBg.style.width = 240 + 'px'; objVideoTitleBg.style.background = '#000000'; objVideoTitleBg.style.opacity = 0.5; objVideoPlayerArea.appendChild(objVideoTitleBg); // タイトル領域 var objVideoTitleArea = document.createElement("div"); objVideoTitleArea.style.position = 'absolute'; objVideoTitleArea.style.overflow = 'hidden'; objVideoTitleArea.style.left = 5 + 'px'; objVideoTitleArea.style.width = 230 + 'px'; objVideoTitleArea.style.height = 19 + 'px'; objVideoTitleArea.style.lineHeight = '20px'; var objVideoTitleText = document.createElement("span"); objVideoTitleText.style.color = '#FFFFFF'; objVideoTitleText.style.fontSize = '9.5pt'; objVideoTitleArea.appendChild(objVideoTitleText); objVideoPlayerArea.appendChild(objVideoTitleArea); // 動画の枠線 var objVideoPlayerBorder = document.createElement("div"); objVideoPlayerBorder.style.position = 'absolute'; objVideoPlayerBorder.style.top = 0 + 'px'; objVideoPlayerBorder.style.left = 0 + 'px'; objVideoPlayerBorder.style.border = '1px solid #000000'; var objVideoPlayerInner = document.createElement("div"); objVideoPlayerInner.style.width = 238 + 'px'; objVideoPlayerInner.style.height = 178 + 'px'; objVideoPlayerBorder.appendChild(objVideoPlayerInner); objVideoPlayerArea.appendChild(objVideoPlayerBorder); // DUGAロゴ var objDugaLogo = new Image(); objDugaLogo.src = '/js/adcustom/img/logo.png'; objDugaLogo.style.position = 'absolute'; objDugaLogo.style.top = 160 + 'px'; objDugaLogo.style.left = 6 + 'px'; objDugaLogo.style.width = 60 + 'px'; objDugaLogo.style.height = 13 + 'px'; objVideoPlayerArea.appendChild(objDugaLogo); // 動画のクリック領域 var objVideoPlayerLink = document.createElement("a"); objVideoPlayerLink.target = '_blank'; objVideoPlayerLink.style.display = 'block'; objVideoPlayerLink.style.position = 'absolute'; objVideoPlayerLink.style.width = 240 + 'px'; objVideoPlayerLink.style.height = 180 + 'px'; objVideoPlayerLink.style.top = 0 + 'px'; objAdCustom.appendChild(objVideoPlayerLink); // 再生ボタン var objPlayMarkArea = document.createElement("div"); objPlayMarkArea.style.position = 'absolute'; objPlayMarkArea.style.width = 240 + 'px'; objPlayMarkArea.style.height = 180 + 'px'; objPlayMarkArea.style.top = 0 + 'px'; objPlayMarkArea.style.cursor = 'pointer'; objPlayMarkArea.onclick = function () { objVideoLoading.style.display = 'block'; objVideoPlayerTag.style.visibility = 'visible'; objVideoPlayerTag.src = objProductData['flv'][LastPlayNo] + '/sample.mp4'; objVideoPlayerTag.load(); objVideoPlayerTag.play(); }; var objVideoControlPlayImg = new Image(); objVideoControlPlayImg.style.position = 'absolute'; objVideoControlPlayImg.style.top = 72 + 'px'; objVideoControlPlayImg.style.left = 95 + 'px'; objVideoControlPlayImg.src = '/js/adcustom/img/playbutton.png'; objVideoControlPlayImg.style.width = 50 + 'px'; objVideoControlPlayImg.style.height = 36 + 'px'; objVideoControlPlayImg.style.opacity = 0.65; objPlayMarkArea.appendChild(objVideoControlPlayImg); objAdCustom.appendChild(objPlayMarkArea); // ローディング画像 var objVideoLoading = document.createElement("div"); objVideoLoading.style.position = 'absolute'; objVideoLoading.style.top = (180 / 2 - 50 / 2) + 'px'; objVideoLoading.style.left = (240 / 2 - 50 / 2) + 'px'; objVideoLoading.style.width = '50px'; objVideoLoading.style.height = '50px'; objVideoLoading.style.display = 'none'; var objFadingCircle = document.createElement("div"); objFadingCircle.className = 'fading-circle'; objFadingCircle.style.width = '50px'; objFadingCircle.style.height = '50px'; objFadingCircle.innerHTML = '
'; objVideoLoading.appendChild(objFadingCircle); objAdCustom.appendChild(objVideoLoading); // 商品情報領域 var objVideoInfoArea = document.createElement("div"); objVideoInfoArea.style.position = 'absolute'; if (blnVerticalMode) { objVideoInfoArea.style.top = 180 + 'px'; objVideoInfoArea.style.left = 0 + 'px'; objVideoInfoArea.style.width = 240 + 'px'; objVideoInfoArea.style.height = 115 + 'px'; } else { objVideoInfoArea.style.top = 0 + 'px'; objVideoInfoArea.style.left = 240 + 'px'; objVideoInfoArea.style.width = 180 + 'px'; objVideoInfoArea.style.height = 180 + 'px'; } objVideoInfoArea.style.background = colorTableBg; objAdCustom.appendChild(objVideoInfoArea); // 商品画像 var objVideoInfoJacketLink = document.createElement("a"); objVideoInfoJacketLink.target = '_blank'; var objVideoInfoJacketImg = new Image(); objVideoInfoJacketImg.style.position = 'absolute'; objVideoInfoJacketImg.style.top = 5 + 'px'; objVideoInfoJacketImg.style.left = 5 + 'px'; objVideoInfoJacketImg.style.width = 60 + 'px'; objVideoInfoJacketImg.style.height = 60 + 'px'; objVideoInfoJacketLink.appendChild(objVideoInfoJacketImg); objVideoInfoArea.appendChild(objVideoInfoJacketLink); // 再生中作品 var objVideoInfoPlayingLink = document.createElement("a"); objVideoInfoPlayingLink.target = '_blank'; var objVideoInfoPlayingImg = new Image(); objVideoInfoPlayingImg.src = '/js/adcustom/img/nowplaying.gif'; objVideoInfoPlayingImg.style.position = 'absolute'; objVideoInfoPlayingImg.style.top = 67 + 'px'; objVideoInfoPlayingImg.style.left = 5 + 'px'; objVideoInfoPlayingImg.style.width = 60 + 'px'; objVideoInfoPlayingImg.style.height = 16 + 'px'; objVideoInfoPlayingLink.appendChild(objVideoInfoPlayingImg); objVideoInfoArea.appendChild(objVideoInfoPlayingLink); // 商品紹介 var objVideoDescLink = document.createElement("a"); objVideoDescLink.target = '_blank'; objVideoDescLink.style.textDecoration = 'none'; var objVideoDescBg = document.createElement("div"); objVideoDescBg.style.position = 'absolute'; objVideoDescBg.style.top = 5 + 'px'; objVideoDescBg.style.left = 70 + 'px'; objVideoDescBg.style.width = ((blnVerticalMode) ? 165 : 105) + 'px'; objVideoDescBg.style.height = 78 + 'px'; objVideoDescBg.style.background = '#FFFFFF'; setElementOpacity(objVideoDescBg, 25); var objVideoDescArea = document.createElement("div"); objVideoDescArea.style.position = 'absolute'; objVideoDescArea.style.overflow = 'hidden'; objVideoDescArea.style.top = 10 + 'px'; objVideoDescArea.style.left = 75 + 'px'; objVideoDescArea.style.width = ((blnVerticalMode) ? 155 : 95) + 'px'; objVideoDescArea.style.height = 68 + 'px'; // 68 objVideoDescArea.style.lineHeight = '14px'; var objVideoDescText = document.createElement("span"); objVideoDescText.style.color = colorTitleNormal; objVideoDescText.style.fontSize = '8pt'; objVideoInfoArea.appendChild(objVideoDescBg); objVideoDescArea.appendChild(objVideoDescText); objVideoInfoArea.appendChild(objVideoDescArea); objVideoInfoArea.appendChild(objVideoDescLink); // タイトル領域(長さ取得用) var objVideoDescHidden = document.createElement("div"); objVideoDescHidden.style.position = 'absolute'; objVideoDescHidden.style.visibility = 'hidden'; objVideoDescHidden.style.fontSize = '9pt'; objVideoDescHidden.style.whiteSpace = 'nowrap'; objAdCustom.appendChild(objVideoDescHidden); // タイトルリスト var LastPlayNo = 0; var PlayListCount = 0; var objVideoPlayList = new Array(); for (var i = 1; i <= 5; i++) { if (!objProductData['url'][i]) { break; } PlayListCount++; if (!blnVerticalMode) { var objVideoEachList = document.createElement("div"); objVideoEachList.linkno = i; objVideoEachList.style.position = 'absolute'; objVideoEachList.style.background = 'url(/js/adcustom/img/playlist.png) left top / 15px 11px no-repeat'; objVideoEachList.style.top = (92 + ((i - 1) * 17)) + 'px'; objVideoEachList.style.left = 5 + 'px'; objVideoEachList.style.width = 151 + 'px'; objVideoEachList.style.height = 12 + 'px'; objVideoEachList.style.lineHeight = '12px'; objVideoEachList.style.color = colorTitleNormal; objVideoEachList.style.fontSize = '9pt'; objVideoEachList.style.padding = '0px 0px 0px 19px'; objVideoEachList.style.cursor = 'pointer'; objVideoEachList.style.whiteSpace = 'nowrap'; objVideoEachList.innerHTML = shortenText(objVideoDescHidden, objProductData['contname'][i], 151, '...'); objVideoEachList.onclick = function () { setActiveMovie(this.linkno, true); }; objVideoInfoArea.appendChild(objVideoEachList); objVideoPlayList[i] = objVideoEachList; } } if (blnVerticalMode) { // 前へボタン var objVideoControlPrevLink = document.createElement("div"); objVideoControlPrevLink.style.position = 'absolute'; objVideoControlPrevLink.style.top = 88 + 'px'; objVideoControlPrevLink.style.left = 5 + 'px'; objVideoControlPrevLink.style.width = 112 + 'px'; objVideoControlPrevLink.style.height = 22 + 'px'; objVideoControlPrevLink.style.cursor = 'pointer'; objVideoControlPrevLink.onclick = function () { var intPrevtNo = LastPlayNo - 1; if (intPrevtNo <= 0) { intPrevtNo = PlayListCount; } setActiveMovie(intPrevtNo, true); }; var objVideoControlPrevImg = new Image(); objVideoControlPrevImg.src = '/js/adcustom/img/prevnextbutton.gif'; objVideoControlPrevImg.style.position = 'absolute'; objVideoControlPrevImg.style.top = 0 + 'px'; objVideoControlPrevImg.style.left = 0 + 'px'; objVideoControlPrevImg.style.width = 112 + 'px'; objVideoControlPrevImg.style.height = 22 + 'px'; objVideoControlPrevLink.appendChild(objVideoControlPrevImg); var objVideoControlPrevText = document.createElement("div"); objVideoControlPrevText.innerHTML = '<< 前の動画'; objVideoControlPrevText.style.position = 'absolute'; objVideoControlPrevText.style.top = 0 + 'px'; objVideoControlPrevText.style.left = 0 + 'px'; objVideoControlPrevText.style.width = 112 + 'px'; objVideoControlPrevText.style.height = 22 + 'px'; objVideoControlPrevText.style.lineHeight = 22 + 'px'; objVideoControlPrevText.style.textAlign = 'center'; objVideoControlPrevText.style.fontSize = '9pt'; objVideoControlPrevLink.appendChild(objVideoControlPrevText); objVideoInfoArea.appendChild(objVideoControlPrevLink); // 次へボタン var objVideoControlNextLink = document.createElement("div"); objVideoControlNextLink.style.position = 'absolute'; objVideoControlNextLink.style.top = 88 + 'px'; objVideoControlNextLink.style.left = 122 + 'px'; objVideoControlNextLink.style.width = 112 + 'px'; objVideoControlNextLink.style.height = 22 + 'px'; objVideoControlNextLink.style.cursor = 'pointer'; objVideoControlNextLink.onclick = function () { var intNextNo = LastPlayNo + 1; if (PlayListCount < intNextNo) { intNextNo = 1; } setActiveMovie(intNextNo, true); }; var objVideoControlNextImg = new Image(); objVideoControlNextImg.src = '/js/adcustom/img/prevnextbutton.gif'; objVideoControlNextImg.style.position = 'absolute'; objVideoControlNextImg.style.top = 0 + 'px'; objVideoControlNextImg.style.left = 0 + 'px'; objVideoControlNextImg.style.width = 112 + 'px'; objVideoControlNextImg.style.height = 22 + 'px'; objVideoControlNextLink.appendChild(objVideoControlNextImg); var objVideoControlNextText = document.createElement("div"); objVideoControlNextText.innerHTML = '次の動画 >>'; objVideoControlNextText.style.position = 'absolute'; objVideoControlNextText.style.top = 0 + 'px'; objVideoControlNextText.style.left = 0 + 'px'; objVideoControlNextText.style.width = 112 + 'px'; objVideoControlNextText.style.height = 22 + 'px'; objVideoControlNextText.style.lineHeight = 22 + 'px'; objVideoControlNextText.style.textAlign = 'center'; objVideoControlNextText.style.fontSize = '9pt'; objVideoControlNextLink.appendChild(objVideoControlNextText); objVideoInfoArea.appendChild(objVideoControlNextLink); } //---------------------------------------------------------- // メソッドの定義 //---------------------------------------------------------- this.init = function () { initAdCustom(); }; //---------------------------------------------------------- // 初期化 //---------------------------------------------------------- function initAdCustom() { // 最初の動画を準備 var blnAutoPlay = (strClientCareer == 'pc' && objConfig['mode'] == 1) ? true : false; if (PlayListCount > 0) { setActiveMovie(1, blnAutoPlay); } } //---------------------------------------------------------- // 動画のイベント処理 //---------------------------------------------------------- objVideoPlayerTag.addEventListener("play", function() { objPlayMarkArea.style.display = 'none'; }, false); objVideoPlayerTag.addEventListener("pause", function() { if (strClientCareer == 'iphone' || strClientCareer == 'android') { return; } objPlayMarkArea.style.display = 'block'; }, false); objVideoPlayerTag.addEventListener("loadedmetadata", function() { // 動画の中央配置 if (!objVideoPlayerTag.videoWidth || !objVideoPlayerTag.videoHeight) { return; } objVideoPlayerTag.style.left = ((240 - objVideoPlayerTag.videoWidth) / 2) + 'px'; objVideoPlayerTag.style.top = ((180 - objVideoPlayerTag.videoHeight) / 2) + 'px'; objVideoPlayerTag.style.width = objVideoPlayerTag.videoWidth + 'px'; objVideoPlayerTag.style.height = objVideoPlayerTag.videoHeight + 'px'; }, false); objVideoPlayerTag.addEventListener("canplay", function() { objVideoPosterArea.style.display = 'none'; objVideoLoading.style.display = 'none'; }, false); objVideoPlayerTag.addEventListener("ended", function() { if (strClientCareer == 'iphone' || strClientCareer == 'android') { return; } var blnAutoPlay = (strClientCareer == 'pc' && LastPlayNo < PlayListCount) ? true : false; var intNextNo = LastPlayNo + 1; if (PlayListCount < intNextNo) { intNextNo = 1; } setActiveMovie(intNextNo, blnAutoPlay); }, false); //---------------------------------------------------------- // その他の関数 //---------------------------------------------------------- function setActiveMovie(intLinkNo, blnAutoPlay) { // テキストカラーのリセット if (!blnVerticalMode) { for (var i = 1; i <= PlayListCount; i++) { var objVideoEachList = objVideoPlayList[i]; objVideoEachList.style.color = colorTitleNormal; } } // 静止画領域の準備 objVideoPosterArea.style.display = 'block'; objVideoPosterArea.style.left = 0 + 'px'; objVideoPosterArea.style.height = 180 + 'px'; objVideoPosterArea.style.width = 240 + 'px'; objVideoPosterImg.style.visibility = 'hidden'; objVideoPosterImg.onload = function () { var intNewWidth = (180 * objVideoPosterImg.naturalWidth) / objVideoPosterImg.naturalHeight; objVideoPosterImg.height = 180; objVideoPosterImg.width = intNewWidth; objVideoPosterArea.style.left = ((240 - intNewWidth) / 2) + 'px'; objVideoPosterImg.style.visibility = 'visible'; }; objVideoPosterImg.src = (blnAutoPlay) ? '' : objProductData['thumb'][intLinkNo] + '/flvcap.jpg'; // 再生する動画の準備 if (!blnVerticalMode) { var objVideoEachList = objVideoPlayList[intLinkNo]; objVideoEachList.style.color = colorTitleActive; } objVideoPlayerTag.style.visibility = (blnAutoPlay) ? 'visible' : 'hidden'; if (blnAutoPlay) { objVideoLoading.style.display = 'block'; objVideoPlayerTag.src = objProductData['flv'][intLinkNo] + '/sample.mp4'; objVideoPlayerTag.load(); objVideoPlayerTag.play(); } objVideoInfoJacketImg.src = objProductData['thumb'][intLinkNo] + '/120x120.jpg'; objVideoTitleText.innerHTML = objProductData['contname'][intLinkNo]; objVideoDescText.innerHTML = objProductData['desc'][intLinkNo]; objVideoInfoJacketLink.href = objProductData['url'][intLinkNo]; objVideoInfoPlayingLink.href = objProductData['url'][intLinkNo]; objVideoDescLink.href = objProductData['url'][intLinkNo]; objVideoPlayerLink.href = objProductData['url'][intLinkNo]; // 再生ボタンの表示調整 objPlayMarkArea.style.display = (blnAutoPlay) ? 'none' : 'block'; // 変数の調整 LastPlayNo = intLinkNo; } function shortenText(objMeasure, strText, strMaxLen, strPlusWord) { var strNewText = strText; var strBaseText = strText; objMeasure.innerHTML = strText; while (strMaxLen < objMeasure.offsetWidth) { strBaseText = strBaseText.substr(0, strBaseText.length - 1); strNewText = strBaseText + strPlusWord; objMeasure.innerHTML = strNewText; } return strNewText; } function setElementOpacity(objElement, intOpacity) { objElement.style['filter'] = (intOpacity == 100) ? '' : 'alpha(opacity=' + intOpacity + ');'; objElement.style['-moz-opacity'] = intOpacity / 100; objElement.style['opacity'] = intOpacity / 100; } function getClientCareer() { var strClientCareer = 'pc'; if (navigator.userAgent.match(/(iPhone|iPad|iPod|iPod touch);/i)) { if (RegExp.$1 == 'iPad') { strClientCareer = 'ipad'; } else { strClientCareer = 'iphone'; } } if (navigator.userAgent.match(/(Android) [0-9\.]+;|(Android)DownloadManager| (Silk)\/|(googlebot-mobile)/i)) { if (RegExp.$1 == 'Silk' || navigator.userAgent.match(/ SC-01C /) || !navigator.userAgent.match(/ Mobile /)) { strClientCareer = 'android-tablet'; } else { strClientCareer = 'android'; } } return strClientCareer; } }