|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Title</title>
|
|
|
+ <style>
|
|
|
+ html, body {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: block;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<iframe id="player" data-id="exrfGjpL" onload="initController()" src="http://e-commerce.kollus.com/wshoping/exrfGjpL?mode=s&no_seek" allowfullscreen></iframe>
|
|
|
+</body>
|
|
|
+<script type="text/javascript" src="https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ var controller;
|
|
|
+ var initController = function () {
|
|
|
+ try {
|
|
|
+ controller = new VgControllerClient({
|
|
|
+ target_window: document.getElementById("player").contentWindow
|
|
|
+ });
|
|
|
+ controller.on('ready', function () {
|
|
|
+ console.log('ready : ');
|
|
|
+ }).on('play', function () {
|
|
|
+ console.log('play : ');
|
|
|
+ var player = document.getElementById('player');
|
|
|
+ var param = {};
|
|
|
+ param.status = "play"
|
|
|
+ param.playerId = player.getAttribute('data-id');
|
|
|
+ window.parent.postMessage(param, "*");
|
|
|
+ }).on('pause', function () {
|
|
|
+ console.log('pause : ');
|
|
|
+ }).on('done', function () {
|
|
|
+ console.log('done : ');
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ console.log("해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.onload = function () {
|
|
|
+ window.addEventListener("message", receiveMsg);
|
|
|
+ function receiveMsg(event){
|
|
|
+ //console.log(event);
|
|
|
+ var player = document.getElementById('player');
|
|
|
+ if(event.data.status == 'play' && event.data.playerId !== player.getAttribute('data-id')){
|
|
|
+ controller.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
gagamel