player2.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. html, body {
  8. margin: 0 auto;
  9. padding: 0;
  10. }
  11. iframe {
  12. width: 100vw;
  13. height: 100vh;
  14. display: block;
  15. border: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <iframe id="player" data-id="exrfGjpL" onload="initController()" src="http://e-commerce.kollus.com/wshoping/exrfGjpL?mode=s&no_seek" allowfullscreen></iframe>
  21. </body>
  22. <script type="text/javascript" src="https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js"></script>
  23. <script type="text/javascript">
  24. var controller;
  25. var initController = function () {
  26. try {
  27. controller = new VgControllerClient({
  28. target_window: document.getElementById("player").contentWindow
  29. });
  30. controller.on('ready', function () {
  31. console.log('ready : ');
  32. }).on('play', function () {
  33. console.log('play : ');
  34. var player = document.getElementById('player');
  35. var param = {};
  36. param.status = "play"
  37. param.playerId = player.getAttribute('data-id');
  38. window.parent.postMessage(param, "*");
  39. }).on('pause', function () {
  40. console.log('pause : ');
  41. }).on('done', function () {
  42. console.log('done : ');
  43. });
  44. } catch (e) {
  45. console.log(e);
  46. console.log("해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.");
  47. }
  48. }
  49. window.onload = function () {
  50. window.addEventListener("message", receiveMsg);
  51. function receiveMsg(event){
  52. //console.log(event);
  53. var player = document.getElementById('player');
  54. if(event.data.status == 'play' && event.data.playerId !== player.getAttribute('data-id')){
  55. controller.pause();
  56. }
  57. }
  58. }
  59. </script>
  60. </html>