동영상 video tag

웹에서는 html5 video 태그를 쓰면 잘먹는다.

하지만 아이폰(사파리), 안드로이드(크롬) 에서는

video 태그를 쓸 경우, 썸네일이 나오지 않는경우가 생긴다 (사파리)

안드로이드는 video 태그의 옵션중 controls를 쓰면 보이기는하는데

모바일 웹이 안드로이드만 있는게 아니니 결론적으로 못쓴다.

일일이 userAgent 메서드로 체크를 해서 하면되긴되는데

여기서 또 문제가 카카오 공유했을시 클릭을하면 카카오톡 자체에서 카카오 웹뷰를 띄우는데 

동영상 썸네일이 나오지 않고 플레이버튼만 나온다.

결론적으로 위와 같이 사용해서는 안된다는 결론이다. 내입장에서 나중에 더많이 찾아보면 나올수도 있겠지만..

그래서

video.js 를 사용하면된다. 일단은 아파치 라이센스라 무료

http://docs.videojs.com/

    <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">

    <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>

    <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>

위 플러그인만 추가하고

<video class="" id="" controls preload="none" poster="" data-setup="{}">

<source src="" type="video/mp4">

</video>

위와 같이 사용하면된다

poster 태그안에 동영상의 썸네일을 꼭 추가해줘야 처음 화면이 설정된다.

이렇게 사용하면 웹 이든 아이폰 안드로이드 웹뷰 뭐 다된다.