슬라이더 레볼루션으로 html5 video 슬라이더 만들어보기!

워드프레스를 처음으로 설치형으로 세팅 한 후, 아마다 테마 안에 있는 Fusion Slider 에 동영상 슬라이더를 테스트 한 적이 있습니다. 가비아 호스팅을 받는데 FTP에 동영상을 덩그라니 올려 놓고 그것을 활용해서 동영상 슬라이더를 만든 후 노출을 시킨 것 입니다. Self-Host Video 방식, 그리곤 계속 테스트 한답시고 제가 트래픽을 잡아 먹었는데, 아니나 다를까 가비아 호스팅 업체에서 1일 데이터 트래픽 한도를 1GB초과 했다는 연락이 계속 오고, 다음날 갱신 될 때까지 사이트가 닫힌 다는 경고였습니다. 동영상 트래픽은 전혀 신경 안쓰고 그저 보여지는 재미에만 신경 쓰다가 생겼던 해프닝! 유튜브나 비메오에 올려 놓은 동영상을 최대한 활용 하는 쪽으로 생각을 해 볼수도 있었는데요, 최적화 된 짧은 동영상을 활용하지 않는 이상,,,

레볼루션 슬라이더 플러그인의 제로데이 취약점으로 악성코드에 노출 되어 많은 경고성 아티클들이 떴었죠. 무료 스캔툴을 제공하는 SUCURI 에서 확인을 해 봤지만 나의 워드프레스 사이트에는 아직 문제는 없는 것 같습니다. (아래 결과 화면)

 

 

 

레볼루션 슬라이더 링크에 들어가 보면 HTML5 기반으로 Video 를 활용하여 깔끔하고 다이나믹 한 효과를 주는 광고 동영상이 있습니다.

볼 때 마다, 완전 따라 해 보고 싶죠!

 

   

 

그래서, 여기서부터 슬라이더 레볼루션 플러그인을 활용,

Self-Host Video, 유튜브, Vimeo 에 올려 놓은 동영상을 통해서 HTML5 Video Slider 만들어 보는 것을 한번 포스팅 해 보려고 합니다.

아주 간략하게요~^^

 

Self-Host Video 를 선택 했구요!

워드프레스 자체 FPT가 아닌, 가비아의 동영상호스팅-스마트HD 베이직을 이용하여 스트리밍 서비스를 이용하는 것으로 채택 했습니다.

 

얼마 전 생일 맞이 기념으로 여행 갔을 때 스마트 폰으로 짧게 찎어 둔 동영상을 Vegas Pro 로 약간 다듬은 후 저의 워드프레스 로컬 폴더에 올려 놓고 Full Screen 옵션으로 만들어 봤습니다.

 

참고로, 모바일(스마트폰, 테블릿)에서는 재생이 안 되도록 설정 해 놨구요! 더불어, 해당 Slider Main Image / Background 에서도 Image BG로 동일한 정적인 이미지로 설정 해 놨습니다. (테마펀치에서도 모바일에서는 동일하게 정적인 이미지로 대체 했습니다.)
 

 

HTML5 기반의 동영상을 만들기 위해서는 우선 슬라이더를 만들어야 합니다.

그냥 Slider 를 만들어도 되고, Slider Templates 를 만들어도 되는 것 같습니다.

 

Slider Title 과 Slider Alias 는 동일 하도록 설정 하고, 당연히 Full Screen 을 선택 한 뒤, Full Screen Width 도 강제로 잡도록 했고,

 

그 다음 만들어진 Slider Templates 의 조금 전 만든 Rev_slider 의 Edit Slides 를 선택 한 후,

 

 

New Transparent Slide 를 클릭 후 생성 된 Slides List 의 Edit Slide 를 클릭 합니다.

 

 

그 다음 나오는 설정 화면에서 아래쪽에 있는 Add Layer : Video 를 선택 후 새창에서 HTML5 선택! 형식에 맞는 동영상 포맷과 URL을 넣어주고, Video SIze 선택 후 Add This Video 해줍니다.

 

여기서 중요한 것!

아래 보면 Next Slide On End 체크 박스가 있습니다. 동영상 단독으로 설정 하면 상관 없지만 다른 슬라이더(이미지든 동영상이든)와 같이 돌아갈 경우 꼭 체크를 해 줘야 부드럽게 로테이션 된다는 사실을 몇시간 동안 삽질을 해서 알게 되었군요 -_-;

 

 

그 다음부터는 어렵지 않습니다.

동영상에 텍스트나 이미지를 더해서 효과를 주는 것인데 이는 Add Layer 나 Add Layer: Image 를 클릭해서 삽입을 하고 아래 보이는 Layers Timing & Sorting 을 활용하여 효과를 더 할 수 있습니다. 물론 Layer Animation 을 통해서 더욱 극적인 효과를 줄 수도 있구요!

 

 

저는 이 외에도 여러가지 동영상을 가지고 테스트를 해 봤는데, 반응형 Full Screen 설정을 하려니 부드럽게 맞춰지질 않더군요! 왜인지는 잘 모르겠습니다. 할 때 마다 새롭고,,, 아래의 화면들이 그런 '삽질' 하던 영상인데 아무리 이 옵션 저 옵션을 설정해도 되지 않아서 아예 모니터 이미지 레이어 사이즈를 맞춰서 작게 넣기도 해 봤습니다. 그런데 억지로 맞추려다 보니 어찌나 터프 해 보이던지,,,^^;

 

  

 

지금 까지 이놈의 슬라이더 레볼루션 프러그인을 겪어본 경험상 동영상을 단독으로 활용 하기 보다는 다른 이미지 슬라이더와 같이 활용하는 것이 더 원할하게 돌아가지 않는가?! 라는 생각이 드네요! 레볼루션 테마펀치 사이트에 들어가 보면 분명 다른 슬라이더와 같이 썼다는 것이라는 것이 보면 볼수록 맞다는 느낌이 듭니다. 두개의 슬라이더가 같이,,,물론 틀린 것일 수도 있구요!

 

아래의 화면이 현재 레볼루션 슬라이더 3개로 메인 화면에 노출한 클럽스쿨(http://www.clubschool.com) WP 블로그 입니다. 아주 천천히~ 가는 또 다른 블로그 이긴 한데, 암튼 세번째의 슬라이더가 다시 적용을 해 본 것 입니다.

 

그나저나 관련 된 한국어로 된 White paper 사이트나 블로그가 아직은 없는 것 같은데, 내가 못 찾는 것인지 잘은 모르겠네요!

암튼 이 녀석은 계속 써보지 않는 이상 방법이 없는 것 같군요! ^