jsp 이미지 슬라이드

검색어 : jsp 이미지 슬라이드

http://blog.naver.com/ez_/140156789842

HTML Video tag

모바일 웹에서 Video tag를 써서 동영상을 보여주려면 몇 가지 암초를 만나게 된다. (1) YouTube나 Vimeo를 사용하거나 (2) H.264 나 WebM등 모바일 브라우저에서 지원하는 동영상 파일을 직접 링크 - a 태그사용 - 하거나 (3) video 태그를 사용해서 영상을 거는 방법 등이 있는데, 어떤 방법을 사용하더라도 장치에 따라 다른 동작을 보이기 때문에 구현이 애매한 부분이있다. iOS 내에서도 iPad의 브라우저는 해당 영역 내에서 바로 재생시켜주는 반면, iPhone/iPod Touch의 브라우저는 전체 화면으로 전환된 후에 재생된다. visibility:hidden이나 display:none 등을 video 태그에 적용하면 브라우저 구현에 따라 올바르게 동작하지 않을 가능성이 높으므로, 높은 호환성을 위해서는 반드시 페이지가 로드되는 시점부터 video tag에 보여질 영역을 할당하고 사용하는 것이 좋다. 마지막으로, webkitSupportsFullScreen() 등 video element 관련 함수는 해당 element가 사용가능한 시점이 아니면 정확한 값을 리턴하지 않는 경우가 있으니 사용에 유의해야 한다. 여러 상황에 대한 fallback은 역시 - 현 시점에서 가장 적절한 구현에 가까울 - 대형 포털 사이트의 모바일 페이지를 참고하는 것이 좋겠다.

참고 : Apple Developer Site : HTMLVideoElementClassReference 

참고 : http://m1.daumcdn.net/m.tvpot/20120406171035/mobile/js/tvpot.mobile.js (다음 TV팟)

Ken-burns effect in JS

기획파트에서 요청하던 Ken-burns 효과를 오늘 서비스에 적용하였다. 언제나 그렇듯, 세상엔 높고 훌륭한 뜻을 가진 사람이 많은 덕에, 누군가 만들어 놓은 소스를 찾을 수 있었다. tobia가 만든 jquery.cross-slide.js 는 만들어진지 2년이 넘었지만 여전히 쓸만하다. jQuery의 의존성을 가지고 있으며 GPLv2 로 배포된다. 간단한 사용 방법을 가지고 있지만, 효과를 적용하는 대상의 element 크기가 변경될 때에 대응하지 못하는 문제점이 있다. 또한, 대상이 고정 크기가 아닌 주변 객체에 따른 가변 크기를 가지고 있을 때 슬라이드 되는 내부 이미지의 크기가 올바르게 적용되지 않는 사소한 아쉬움도 있다. 두번째 문제는 꼭 해결해야 해서, 해당 파일의 133-134라인을 아래와 같이 수정하였다.

133                     plan[i].width = self_width;

134                     plan[i].height = img.height * (self_width / img.width);

 

CrossSlide-master.zip

참고 : http://en.wikipedia.org/wiki/Ken_Burns_effect

참고 : http://tobia.github.com/CrossSlide/

참고 : https://gist.github.com/2350170 (무작위 Ken Burns 효과를 위한 예제)

---

[출처] 2012-04-10 개발일지|작성자 아미