최종 목표는 jqmobile 를 통해서 동영상을 출력하는것이다.
기본적으로 jqmobile 에선 video출력을 제공하지 않기 때문에 html5를 이용하려 한다.
문제는 html5의 태그를 각 브라우저에선 지원을 해주지만 브라우져별 지원 코덱이 다르다는것에 있다.
다행이 두 OS간에 지원하는 요구사항이 하나 있다.(아직은)
H.264 // ACC // MP4 !!
같은 조건의 확장자만 달라도 않되는것을 확인했다...
물론 영상/음향의 설정이 다르면 안나오거나 재생조차가 않된다.
다음팟인코더를 사용할 경우 환경설정에서 다음과 같이 설정을 하면 된다.
혹은 애플/아이팟을 선택하면 자동으로 다음과 같이 설정된다.
동영상이 준비 되었다면 코딩은 간단하다.
나의 경우 동영상의 경로가 video 폴더내의 test1.mp4 로 되어 있는것을 볼수 있다.(각자 알맞게 넣어주면된다.)
source 태그가 두개인 이유는 위에 것은 IPhone 에서 먹는 태그이고 아래 type 가 없는것이 안드로이드에서 먹는 태그이다.
스크립트의 경우 안드로이드에선 자체적인 플레이가 되지 않는다. 스크립트가 없다면 동영상이 플레이 되지 않는다. 아이폰의 경우엔 자체적으로 동영상을 지원해줘서 컨트롤 까지 지원을 해준다.
참조 : http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
http://webdevmobile.com/xe/htmlcss/12920
기본적으로 jqmobile 에선 video출력을 제공하지 않기 때문에 html5를 이용하려 한다.
문제는 html5의 태그를 각 브라우저에선 지원을 해주지만 브라우져별 지원 코덱이 다르다는것에 있다.
다행이 두 OS간에 지원하는 요구사항이 하나 있다.(아직은)
H.264 // ACC // MP4 !!
같은 조건의 확장자만 달라도 않되는것을 확인했다...
물론 영상/음향의 설정이 다르면 안나오거나 재생조차가 않된다.
다음팟인코더를 사용할 경우 환경설정에서 다음과 같이 설정을 하면 된다.
혹은 애플/아이팟을 선택하면 자동으로 다음과 같이 설정된다.
동영상이 준비 되었다면 코딩은 간단하다.
<%@ page contentType="text/html;charset=euc-kr" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video id ="video" height="205" width="300">
<source src="./video/test1.mp4" type="video/mp4">
<source src="./video/test1.mp4" >
Video 태그가 지원되지 않는 브라우저 입니다.
</video>
</body>
</html>
<script>
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
</script>
나의 경우 동영상의 경로가 video 폴더내의 test1.mp4 로 되어 있는것을 볼수 있다.(각자 알맞게 넣어주면된다.)
source 태그가 두개인 이유는 위에 것은 IPhone 에서 먹는 태그이고 아래 type 가 없는것이 안드로이드에서 먹는 태그이다.
스크립트의 경우 안드로이드에선 자체적인 플레이가 되지 않는다. 스크립트가 없다면 동영상이 플레이 되지 않는다. 아이폰의 경우엔 자체적으로 동영상을 지원해줘서 컨트롤 까지 지원을 해준다.
http://webdevmobile.com/xe/htmlcss/12920
'web > HTML' 카테고리의 다른 글
| HTML5 LocalStorage 웹클라이언트에서 데이터 저장은 LocalStorage사용! (0) | 2012.06.05 |
|---|---|
| 동적 테이블 td 색상 칠하기(배경색) (0) | 2011.08.30 |
| Double Margin Float Bug (IE6~7) (0) | 2011.04.17 |
| HTML tab key 순서 정하기 (0) | 2011.03.09 |
| html 테이블 틀고정 (0) | 2011.01.23 |
