모바일 상품동영상 관련 수정

src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html

@@ -56,54 +56,48 @@
 												<th:block th:if="${goodsVideo.videoGb == 'Y'}">
 												<!-- <iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0&autoplay=1&mute=1'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
 												<div id="utbplayer"></div>
-<script src="https://www.youtube.com/iframe_api"></script><!-- 아래 원문에서 복잡하게 기술되었던 부분 -->
-<script th:inline="javascript">
-/*<![CDATA[*/
-  var player;
-
-  function onYouTubeIframeAPIReady(){
-
-    player = new YT.Player('utbplayer',{
-
-      width:'100%',
-
-      videoId:[[${goodsVideo.kmcKey}]],
-
-      playerVars:{'autoplay':1,'playsinline':1},
-
-      events:{ 'onReady':onPlayerReady,
-    	  	'onStateChange': onPlayerStateChange
-			}
-
-    });
-
-  }
-
-  function onPlayerReady(e){
-
-    e.target.mute();
-
-    e.target.playVideo();
-
-  }
-  
-  var done = false;
-  function onPlayerStateChange(event) {
-    if (event.data == YT.PlayerState.PLAYING && !done) {
-      setTimeout(stopVideo, 6000);
-      done = true;
-    }
-  }
-  function stopVideo() {
-    player.stopVideo();
-  }
-/*]]>*/
-</script>
-
-
+														<script src="https://www.youtube.com/iframe_api"></script><!-- 아래 원문에서 복잡하게 기술되었던 부분 -->
+														<script th:inline="javascript">
+														/*<![CDATA[*/
+														  var player;
+														
+														  function onYouTubeIframeAPIReady(){
+														
+														    player = new YT.Player('utbplayer',{
+														
+														      width:'100%',
+														
+														      videoId:[[${goodsVideo.kmcKey}]],
+														
+														      playerVars:{'autoplay':1,'playsinline':1},
+														
+														      events:{ 'onReady':onPlayerReady,
+														    	  	'onStateChange': onPlayerStateChange
+																	}
+														    });
+														  }
+														
+														  function onPlayerReady(e){
+														    e.target.mute();
+														    e.target.playVideo();
+														  }
+														  
+														  var done = false;
+														  function onPlayerStateChange(event) {
+														    if (event.data == YT.PlayerState.PLAYING && !done) {
+														      setTimeout(stopVideo, 6000);
+														      done = true;
+														    }
+														  }
+														  function stopVideo() {
+														    player.stopVideo();
+														  }
+														/*]]>*/
+														</script>
 												</th:block>
 												<th:block th:unless="${goodsVideo.videoGb == 'Y'}">
-												<iframe id="child" class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey +'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+												<button id="prodMovBtn" type="button" class="btn_play" data-setplay="play">동영상보기</button>
+												<iframe id="child" class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey}" frameborder="0" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe>
 												</th:block>
 											</div>
 										</div>
@@ -2796,18 +2790,22 @@
 			}
 			
 		});
+		
+	};
 	
-	   	let goodsVideoList = [[${goodsVideoList}]];
-		let videoFlag = false;
-		if (goodsVideoList != null){
-			$.each(goodsVideoList, function(idx, goodsVideo) {
-				if ("M" == goodsVideo.videoGb){
-					videoFlag = true;
-					return false;
-				}
-			});
-		}	
-		if (videoFlag){
+   	let goodsVideoList = [[${goodsVideoList}]];
+	let videoFlag = false;
+	if (goodsVideoList != null){
+		$.each(goodsVideoList, function(idx, goodsVideo) {
+			if ("M" == goodsVideo.videoGb){
+				videoFlag = true;
+				return false;
+			}
+		});
+	}	
+	if (videoFlag){
+		var player = document.getElementById('child');
+		player.onload = function() {
 			try {
 				var controller = new VgControllerClient({
 					target_window: document.getElementById('child').contentWindow
@@ -2815,39 +2813,42 @@
 				//console.log(controller.get_screen());
 				//controller.enable_fullscreen_button(true);
 				// 여기서부터 이벤트 리스너를 등록하거나, 웹페이지 Element에 메소드를 bind하면 됩니다.
+				
+				// 클릭 인지 테스트.
+				var MovBtn = document.getElementById("prodMovBtn");
+					MovBtn.addEventListener("click", function() {
+						$(this).hide();
+						controller.play();
+					});
+
+				controller.on('pause', function() { //일시정지 일때 이벤트 실행.
+					$("#prodMovBtn").show();
+				});
+				
+				$(window).scroll(function(){
+					var scrollTop= $(window).scrollTop();
+					var movHeight = $(".movbox").outerHeight()/2.5;
+					console.log(movHeight);
+					console.log(scrollTop);
+					if (scrollTop > movHeight){
+						controller.pause();
+						return false;
+					} else {
+						controller.play();
+						return false;
+						//controller.set_control_visibility(false);
+					}
+				});
+
 			} catch(e) {
 				// Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
 				// 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
 				// 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
 			}
-			controller.mute();
-			controller.play();
-			controller.set_control_visibility(false);
-			
-			$(window).scroll(function(){
-				var scrollTop= $(window).scrollTop();
-				var itemTop=$('.descript_box').offset().top;
-				var winHeight = $(window).height();
-				//console.log(winHeight-scrollTop);
-				//console.log(winHeight/1.5);
-				if (winHeight-scrollTop <= winHeight/1.5){
-					controller.pause();
-				} else {
-					controller.play();
-					controller.set_control_visibility(false);
-				}
-		
-				controller.on('done', function() {
-					controller.play();
-					controller.set_control_visibility(false);
-				});
-			}); 
 			
-		}
-	   
-		
-		
-	};
+		};
+	}
+   
 	
 /*]]>*/
 </script>