최근에 워드프레스로 홈페이지를 작업하면서 비디오 배경을 넣어야 할 일이 생겼습니다.


반응형 테마를 입힌 것이고, 해당 홈페이지는 PC와 모바일 모두 동작이 되어야 했습니다.


그런데 모바일에서는 비디오가 재생이 안되고 대체 이미지만 뜨더군요.




처음에는 이 문제를 소스코드를 수정해서 고치려고 했습니다.


그래서 먼저 분석을 해 봤습니다.





소스코드에 <video> 태그가 있는 걸 봐서는, html5로 동영상이 동작함을 알 수 있습니다.


워드프레스 플러그인 대부분이 html5를 활용하므로, 일반적인 코드라고 할 수 있습니다.





그런데 모바일에서 직접 디버깅하는 건 어렵기 때문에, 구글 크롬의 모바일 디버깅 기능을 활용해서 디버깅을 해 봤습니다. 역시나 동영상이 재생이 안 되는데...


video 태그가 아예 사라져 버립니다!






html5의 video는 javascript와 jquery로 조작하는게 가능합니다. 그래서 jquery의 특정 함수를 써서 모바일에서 video 태그가 사라지게 만들었다고 생각했었습니다.


그런 역할을 하는 jQuery 함수는, remove() 입니다.


그래서 이 부분과 관련되어 있을 듯한 소스코드의 remove 함수를 찾아서 수정했지만, 여전히 동영상은 보이지 않았습니다.


그래서 구글링을 해 봤는데...


이런 글이 있더군요.


http://support.pixelentity.com/archive/index.php/t-8168.html



(위 이미지는 위 링크의 내용입니다.)


이 링크가 말하는 가장 중요한 내용은 이겁니다.


"대부분의 모바일 디바이스는 video background를 지원하지 않는다. 모바일 플랫폼상의 한계다."


이 링크에서는 문제를 해결하기 위해 비디오의 경로를 링크 걸어서 클릭하도록 유도하지만, 이 부분을 실장님께 말씀드렸더니 좋은 방법이 아닌 것 같다고 하더군요.


차라리 대체 이미지에 비디오의 스틸컷을 넣는 게 낫겠다고 하셨습니다.




정말 안드로이드 폰(LG G2), 아이폰(iPhone 6)으로 테스트 해봐도 video background는 동작하지 않습니다.


기기상의 한계라니 어쩔 수 없다라... 실장님은 생각을 좀 더 해봐야 겠다고 말했지만... 


흠...


정말 video background 들어가는 부분에 대체 이미지로 비디오 스틸컷 넣어서 모바일에서 보여주는게 최선일까요?





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바