포럼
모바일 환경에서 동영상 재생 시 문제
2013.03.05 04:39
안녕하세요. XE 사용자입니다.
모바일 환경에서 동영상 재생 시 문제가 있어 문의 드립니다.
XE엔진을 사용해 홈페이지를 제작했습니다.
모바일(스마트폰) 환경에서 접속 시 사이트가 모바일 버전으로 변경이 되도록 사이트를 제작했습니다. 모바일 내에서 제작 사이트를 탐색할 때, 텍스트와 사진에서는 문제가 없으나 동영상을 재생시에는 원래 데스크탑으로 접속할 때의 사이즈가 나와 모바일 환경에서 부적합한 크기로 재생이 됩니다.
또한 이와 같은 문제는 ios 환경의 모바일에서는 동영상 재생시 별도 플레이어에서 연결이 돼 가로세로 핏에 맞도록 디스플레이가 됩니다. 그러나 안드로이드 환경의 모바일에서 문제가 발생합니다.
많은 테스트를 해 보았습니다.
일단 동영상 업로드는 www.vimeo.com 사이트를 이용해 공유 소스를 첨부해 사용하고 있습니다.
안드로이드 환경의 모바일에서 vimeo.com 접속시 해당 홈페이지 내에서 동영상 재생은 문제가 없습니다. 그러나 같은 동영상의 소스를 복사해 XE로 제작한 홈페이지로 옮겨와 해당 동영상을 재생하면 모바일 환경에 맞게 보이지 않는 동일한 문제가 발생됩니다. 따라서 디바이스의 문제가 아닌 홈페이지 자체의 문제로 여겨져 글 올립니다. 확인 부탁드립니다.
감사합니다.
댓글 5
-
BJ람보
2013.03.05 05:33
-
Jabezp
2013.03.05 09:13
저도 같은 문제로 고민 많이 헸는데요......
편법이라고 할까.. 아무튼 다음과 같이 쓰고 있습니다.
width 값을 100% 잡아주는 것입니다.
예를 들면
실제 코드가 아래와 같다면
<iframe src="http://player.vimeo.com/video/57765423" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/57765423">Tiger - Full Movie (Japanese subs)</a> from <a href="Vimeo.http://vimeo.com">Vimeo</a>.</p>
이것 아래처럼 Width 값만 100%로 수정해 줍니다.
<iframe src="http://player.vimeo.com/video/57765423" width="100%" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/57765423">Tiger - Full Movie (Japanese subs)</a> from <a href="Vimeo.http://vimeo.com">Vimeo</a>.</p>
그러면 아래 샘플처럼 배경화면이 화면폭에 맞춰져 길게 나오는데 일단 play를 하면 정상 비율로 나오니
이는 걱정 안 하셔도 됩니다.
유투브나 비메오 다 마찬가지 입니다.
Tiger - Full Movie (Japanese subs) from Beaufort on Vimeo.
-
한마음^^
2013.03.05 10:41
저는 이걸로 간단하게 해결했습니다.
http://www.xpressengine.com/index.php?mid=tip&page=3&document_srl=20990394
밑에 댓글을 보면 Tofinder 님이 올리신 방법이 있는데 그걸로 하면 잘 됩니다.
-
마음의빈자리
2013.03.05 22:55
http://www.xpressengine.com/index.php?&mid=download&search_keyword=모바일&package_srl=21154641
요걸로 완벽하게 제어가 가능합니다.
단, 모바일 레이아웃 및 게시판 스킨을 사용하셔야 합니다. ^^
-
자유로
2013.03.09 08:09
모두들 성의있는 답변 고맙습니다.
저도 열심히 해서 여러분과 같이 답변할 수 있도록 노력하겠습니다.
홈페이지문제도... 기기의 문제도 아닙니다.
vimeo에서 정상적으로 리사이징 해서 보여지는 것은 그 사이트에서 모바일기기까지 완벽 호환하기 위해서 사이트가 제작이 되어있기 때문에 그렇습니다. 그래서 어떤 크기던지 모바일 기기를 인식하고 그 기기의 해상도에 마춰서 사이트의 크기및 영상의 크기가 정해지는 것이죠.
반면 퍼온 영상에서 크기가 벗어나는 이유는 퍼온 소스에서 width크기 즉 가로크기가 고정되어 있기때문에 따로 리사이징을 하지 않게되어 나타나는 문제인거죠..
퍼온것도 자체적으로 모바일기기까지 호환하기위해서는 거기에 맞는 html 속성이던지 java스크립트가 필요할 것 같고 현제로써는 제 머리에서 나타나는 해결책은 딱히 안나오네요..
여튼.. 해당문제는 xe자체의 문제라고 보기엔 어렵습니다. 퍼온 소스에 따라 모바일에서도 보여지는 것이 고정, 혹은 변화되는 부분이기때문에 이 부분을 수정하기위해서는 따로 코딩작업이 필요할뿐이죠../긁적../