style24
/
style24.doc


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!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="H4ahGjvq" onload="initController()" src="https://v.kr.kollus.com/hpaoGnJN" style="border: none;" 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 : ');
                controller.play();
            });
        } 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>