IT 기술 따라잡기

HTML5로 비디오 보여주기 Video Tag

2011. 12. 17. 02:45 | Posted by 솔웅

그동안 주로 CSS3 (Webkit 중심으로) 를 다뤘구요. 지난 글에서 자바스크립트를 잠깐 다뤘었습니다.
지금까지 주요한 부분은 바로 Webkit입니다. 지금 진행중인 글 어느정도 마무리 되면 Webkit은 따로 다룰 필요가 있는 주제 같습니다.
그리고 오늘부터 다룰 부분은 본격적인 HTML5 입니다.

오늘은 브라우저에서 HTML5로 비디오를 어떻게 실행하는지 또 비디오 플레이어는 어떻게 구성하는지에 대해 시작하겠습니다.

먼저 사용할 동영상 파일은 각자 준비해 주세요. 파일 형식은 mp4 입니다.
저는 유튜브에서 뮤직비디오 하나 다운 받아서 사용할 겁니다.

아래와 같이 html 파일을 만드세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
</head>
<body style="background-color:#8EE5EE;">
    <div id="big_wrapper">
        <video src="song.mp4"> </video>
    </div>
</body>
</html>

제 동영상 파일은 이름이 song.mp4 입니다.

크롬 브라우저에서 실행하면 위와 같이 나옵니다.
동영상이 play되지도 않고 어디 play버튼이나 stop 버튼 뭐 이런게 하나도 없습니다.
video 태그를 아래와 같이 고쳐 보세요.
<video src="song.mp4" controls > </video>

그냥 video 태그에 controls만 넣었는데 플레이버튼, 정지버튼,진행상황 bar 그리고 볼륨조절까지 다 나오네요.

video tag 안에 width와 height도 넣을 수 있습니다. 그러면 동영상 사이즈가 변할 겁니다.
이 video tag 안에 넣을 수 있는 속성들은 아래와 같은 것들이 있습니다.

다 보시면 아실 겁니다.
아래와 같이 video 태그를 바꿔보세요.
<video src="song.mp4" controls width="640" height="360" loop poster="video05.png"> </video>
너비, 높이를 지정했고 루프를 선언했고 poster에 한 이미지를 지정했습니다.
(저는 HTML5 로고를 사용했습니다.)

그러면 처음 실행될 때 poster에서 지정된 이미지가 나타나고 재생 버튼을 누르면 동영상이 시작됩니다.
여기에 autoplay를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.

저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자 (0)	2011.12.22
HTML5 Canvas 이용하기 - 01 - (0)	2011.12.21
HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript (2)	2011.12.19
HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2)	2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0)	2011.12.17
JavaScript 맛보기 (0)	2011.12.16
HTML5 CSS Animation 효과 (5)	2011.12.15
HTML5 CSS Text shadow, translate 효과 등등 (0)	2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기 (0)	2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model) (6)	2011.12.10

WEB_APP/Sencha_Touch

Sencha Touch getting started - 설치 및 예제 실행 -

2011. 12. 16. 19:16 | Posted by 솔웅

Sencha Touch 를 설치하고 간단한 예제를 한번 실행해 보겠습니다.

일단 센차터치를 설치하기 위해서는 아래 3가지를 준비하셔야 합니다.
1. Sencha Touch SDK
    아래 페이지를 가시면 1.1.1과 2.0 developer preview 버전을 다운 받으 실 수 있습니다.
http://www.sencha.com/products/touch/download/
2. 웹서버
    저는 APM Setup 을 이용해서 아파치 웹 서버를 설치 했습니다.
    APM Setup download
3. 최신 웹 브라우저, 크롬, 사파리 추천

세가지 모두 준비 되셨으면 먼저 웹 서버부터 설치합니다.
그냥 클릭만 하면 됩니다.
다 설치 하신 후 크롬 브라우저를 여셔서 주소창에 localhost 를 칩니다.

이 화면이 나오면 웹서버 설치는 완료 된 것입니다.
잘 안되시면 아까 다운 받았던 홈페이지를 참조하세요.

그 다음엔 다운받았던 센차터치 SDK 압축을 풉니다.
그리고 그 폴더를 웹서버의 htdocs 폴더에 복사해 넣습니다.
C:\APM_Setup\htdocs (디폴트로 깔면 경로가 이렇습니다.)

복사가 완료 되면 크롬 브라우저를 열어서 주소창에 http://localhost/sencha-touch-2-pr2 를 입력하고 엽니다.

이렇게 화면이 나오면 설치가 완료 된 겁니다.

이제 예제를 한번 실행해 볼까요?

먼저 아무곳에나 폴더 하나를 만드시고 아래와 같이 index.html을 만드세요.
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

그리고 센차터치가 깔려 있는 폴더의 아래 파일을 복사해서 index.html이 있는 폴더에 넣습니다.
resources/css/sencha-touch.css
그리고 센차터치폴더에 있는 sencha-touch-all.js 파일도 복사해 넣습니다.

이러면 센차터치를 이용할 준비가 끝난겁니다.

이제 한번 이용해 볼까요?
아래와 같이 app.js를 index.html 이 있는 폴더에 만듭니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});
그리고 크롬에서 이 index.html을 불러옵니다.

이렇게 나오면 센차터치로 첫번째 프로그램을 만든 겁니다.
그럼 이제 크롬에서 다시 http://localhost/sencha-touch-2-pr2 로 가 보겠습니다.

여기서 Get Started with 2.0 에 있는 Read the guide를 클릭해 보세요.

스크롤을 내리다 보면 위 화면이 보일겁니다. 여기서 Live Preview 를 클릭해 보세요.

그러면 이렇게 크롬 브라우저에서 시뮬레이터가 뜨면서 결과가 출력 됩니다.

그 아래 예제 하나만 더 해 볼까요?
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});

위 코드를 아까 만들었던 app.js 파일에 덮어 쓰고 저장하세요.

크롬에서 실행하면 이런 화면이 나옵니다.
그럼 아까 웹서버로 불러왔던 getting started 화면에서 Live Preview를 클릭해 보겠습니다.

같은 화면이 시뮬레이터에서 나오죠?

그 아래에 있는 예제들도 해 보세요.

오늘은 센차터치 설치하고 예제를 웹서버를 통해 시뮬레이터로 보는 방법과 웹서버가 아닌 그냥 브라우저로 보는 방법을 배웠습니다.

다음엔 본격적인 센차터치 공부를 할 텐데요. 오늘 getting started 에 나와있는 예제를 잘 보시면 대충 문법은 이해가 가실겁니다.

다음시간부터 자세히 다뤄 볼께요.

저작자표시 비영리 동일조건

'WEB_APP > Sencha_Touch' 카테고리의 다른 글

Sencha Touch 2 Tutorial - Controllers - (2)	2012.03.06
Sencha Touch 2 Application에 대한 전반적인 이해 (0)	2012.03.04
Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -2- (4)	2012.02.26
Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -1- (6)	2012.02.25
Sencha Touch Tutorial 1 Getting Started (0)	2012.02.22
Sencha Touch 로 첫번째 앱 만들기 -4- (1)	2012.02.21
Sencha Touch 로 첫번째 앱 만들기 -3- (0)	2012.02.20
Sencha Touch 로 첫번째 앱 만들기 -2- (6)	2012.02.17
Sencha Touch 로 첫번째 앱 만들기 -1- (6)	2012.02.14
Sencha Touch Road Show 를 다녀와서.... (4)	2011.12.14

WEB_APP/HTML5

JavaScript 맛보기

2011. 12. 16. 10:57 | Posted by 솔웅

자바 스크립트를 좀 알아보겠습니다.
HTML 파일은 아래와 같이 준비해 주세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script src="dougy.js"></script>
    <title> Dougy's HTML5 </title>
</head>
<body>
    <div id="big_wrapper">
        <p id="tuna"> first </p>
        <p id="bacon"> second </p>
        <p id="tuna"> third </p>
    </div>
</body>
</html>

처음 doctype은 HTML5를 사용하겠다는 의미입니다.
브라우저는 이 코드가 있을 경우 HTML5를 사용 가능하도록 만듭니다.
물론 HTML5가 지원되는 브라우저라야 되겠죠.
그리고 오늘은 자바스크립트를 할 거니까 별로 관계는 없습니다.
그래도 지금 HTML5를 배우고 있으니까 이 코드를 넣는게 낫겠죠.

그리고 script 태그를 보시면 dougy.js 를 사용할 거라고 선언했습니다.

그럼 dougy.js를 볼까요?
function getStuff() {
    document.querySelector('#tuna').onclick=talk;
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;
이 코드를 복사해 넣으세요.
getStuff() 내용은 #tuna 라는 id를 가진 태그를 클릭하면 talk 함수를 실행하라는 의미입니다.
talk 함수는 alert box를 띄우는 함수구요.
맨 마작은 웹페이지가 처음 열릴 때 getStuff 함수를 사용하라는 의미입니다.

이러면 tuna라는 id를 가진 first 를 클릭하면 이렇게 alert 창이 뜹니다.

그런데 이렇게 하면 third도 id가 tuna 인데 alert창이 뜨지 않습니다.
제일 첫번째 id에만 적용 됩니다.
이렇게 여러 id에도 적용이 되야 할 경우에는 Array(배열)을 이용해야 됩니다.
그리고 querySelectorAll 을 사용하구요.
dougy.js를 아래와 같이 고칩니다.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    list[0].onclick=talk;
    list[1].onclick=talk1;
}
function talk() {
    alert('Alert box!');
}
function talk1() {
    alert('Hi Alert box2!');
}
window.onload=getStuff;

참고로 아래 코드도 보세요.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    for(var i=0; i<list.length;i++) {
        list[i].onclick = talk;
    }
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;

보시면 for 문을 이용해서 id가 tuna인 모든 태그를 클릭했을 때 talk 함수를 실행하는 방법입니다.
팁으로 알려드립니다.

다음 글에서는 HTML5의 video Tag에 대해 공부하겠습니다.

저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Canvas 이용하기 - 01 - (0)	2011.12.21
HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript (2)	2011.12.19
HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2)	2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0)	2011.12.17
HTML5로 비디오 보여주기 Video Tag (0)	2011.12.17
HTML5 CSS Animation 효과 (5)	2011.12.15
HTML5 CSS Text shadow, translate 효과 등등 (0)	2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기 (0)	2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model) (6)	2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2)	2011.12.09

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5로 비디오 보여주기 Video Tag

'WEB_APP > HTML5' 카테고리의 다른 글

Sencha Touch getting started - 설치 및 예제 실행 -

'WEB_APP > Sencha_Touch' 카테고리의 다른 글

JavaScript 맛보기

'WEB_APP > HTML5' 카테고리의 다른 글

티스토리툴바