Infowindow에서 object태그로 vlcplayer를 적용시켰더니 width=0, height=0으로 출력됩니다

sangj82 · 7월 7, 2019, 9:52오전

infowindow의 예제로 테스트를 했을 때 object로 vlc width를 지정했는데도 마커를 클릭하면 0로 나옵니다

var iwContent = = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"  width="640" height="480" id="vlcEmb_" events="True">';
  _output += '<param name="Src" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" />';
 _output +=  '<param name="ShowDisplay" value="True" />';
  _output += '<param name="AutoLoop" value="False" />';
  _output += '<param name="AutoPlay" value="True" />';
  _output += '<embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"  target="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" >';
  _output += '</embed>';
  _output += '</OBJECT>';

explorer에서 테스트하면

가로와 세로가 0가 됩니다. 음악은 들리니 재생은 되는 것 같습니다

doji.doo · 7월 8, 2019, 4:37오전

내용은 뜨지 않지만 위치는 잘 잡는 것 같은데요.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
var position =  new kakao.maps.LatLng(33.450701, 126.570667);

var marker = new kakao.maps.Marker({
  position: position,
  clickable: true
});
marker.setMap(map);

var iwContent = '<object width="640" height="480" id="vlcEmb_" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" events="True"><PARAM NAME="AutoLoop" VALUE="0"><PARAM NAME="AutoPlay" VALUE="-1"><PARAM NAME="Toolbar" VALUE="-1"><PARAM NAME="ExtentWidth" VALUE="0"><PARAM NAME="ExtentHeight" VALUE="0"><PARAM NAME="MRL" VALUE="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"><PARAM NAME="Visible" VALUE="-1"><PARAM NAME="Volume" VALUE="50"><PARAM NAME="StartTime" VALUE="0"><PARAM NAME="BaseURL" VALUE="http://13.209.228.11:8080/index.html"><PARAM NAME="BackColor" VALUE="0"><PARAM NAME="FullscreenEnabled" VALUE="-1"><PARAM NAME="Branding" VALUE="-1"><param name="Src" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"><param name="ShowDisplay" value="True"><param name="AutoLoop" value="False"><param name="AutoPlay" value="True"><embed width="640" height="480" id="vlcEmb" type="application/x-google-vlc-plugin" target="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" loop="no" autoplay="yes" version="VideoLAN.VLCPlugin.2"></object>';
var iwRemoveable = true;
var infowindow = new kakao.maps.InfoWindow({
    disableAutoPan: true,
    content : iwContent,
    removable : iwRemoveable
});

kakao.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);  
});

yh9149 · 3월 5, 2020, 12:30오후

혹시 가로 세로가 0이 되는 현상은 해결 하셨나요~~??
저도 같은 문제로 고민중 이어서요 ㅜㅜ

sangj82 · 3월 6, 2020, 3:37오전

 kakao.maps.event.addListener(marker, 'click', (function(marker, i) {
                       return function() {
              var content = '<OBJECT id="아이디" .............................

               var infowindow = new daum.maps.InfoWindow({
                               content: content
                           });

              //여기에 해당 content의 embed id를 찾아서 width와 height를 강제로 바꿔주심됩니다
                            document.getElementById("아이디").width = "220px"; 
                            document.getElementById("아이디").height = heightSize; 
                        
                            document.getElementById("아이디").style.width = "220px";
                            document.getElementById("아이디").style.height = heightSize;

}