HTML52015. 4. 27. 21:02

HTML5 Audio Element..

HTML5에서는 Audio파일을 컨트롤 할 수 있는 기본적인 테그를 가지고 있다.


<audio></audio>


이전에는 브라우저 마다 지원하는 파일형식이 다 달랐지만(책의 내용) 현재에는 모든 브라우저에서 거의 모든 파일의 형식을 지원하는 것 같다.

책에서는 브라우저 마다 지원하는 파일이 다르니 알아서 변화해 쓰세요라고 했지만..실제로 코드에 지원하지 않는다는 파일 형식을 넣고 실행 해보면 아주 잘 작동한다.


<audion controls sutoplay loop>

<source src="music.mp3" type="audio/mp3">

<source src="music.wav" type="audio/wav">

</audion>


위와 같은 코드는 브라우저 별 지원 파일이 다르기 때문에 오디오 파일의 리스트를 audio 태그 안에 나열하고 브라우저는 지원 가능한 파일을 재성하는 방식이다. 현재는 거의 모든 파일이 동작하는 것 같으니 이코드는 무시해도 될 듯 하다.


* Audio Tag attribute

duration - audio객체의 길이로 단위는 초.

currentTime - 재생중인 audio객체의 현재 위치로 단위는 초.

loop - true또는 false. 재생중인 audio객체의 재생이 끝나면 다시 재생할지를 결정.

autoplay - true또는 false. audio객체의 파일 로딩이 끝난 뒤 자동재생을 결정.

muted - true또는 false. audio객체의 음소거를 결정.

controls - true또는 false. audio객체를 컨트롤 할 수 있는 컨트롤을 출력.

volume - audio볼륨. 0~1사이의 값.

paused - true또는 false. audio객체의 현재 상태를 반환.

ended - true또는 false. audio객체의 재생이 끝나면 true반환.

currentSrc - audio객체를 위한 오디오 파일의 URL.

preload - 페이지가 로드 되기전 audio객체에서 불러올 오디오 파일을 미리 불러올지에 대한 설정.


여기까지는 기본적이 audio 태그의 사용법이었다.


각 브라우저마다 지원하는 오디오 파일의 형식이 다르다고 했는데, 지원 가능 여부에 대해서 알아보는 방법이 있다.


audioElement.canPlayType("audio/ogg");


canPlayType() 메소드에 파일 타입을 파라미터로 넣게 되면 그 타입을 지원하는지 하지 않는지에 대해서 리턴을 하게 된다.

리턴값은 probably나 maybe등을 리턴한다.


supportedAudioFormat(audioElement);


위 함수의 파라미터에 오디오객체를 넣어서 실행하게 되면 현재 지원 가능한 audio파일의 확장자를 리턴한다. 지원하는 파일이 없을 경우에는 빈공백문자열을 리턴하게 되니 파일을 불러오기전 실행하면 될듯한데..현재상황에서 브라우저들은 거의 모든 파일을 재생하도록 지원할 것 같다.




계속해서 스터디중..(업데이트 예정)

저작자표시

'HTML5' 카테고리의 다른 글

화면 해상도에 맞춰 페이지 변경..  (0) 2015.03.13
HTML5 Video..  (0) 2015.02.14
HTML5 drawImage()..  (0) 2014.12.24
Html에서 Div와 TextArea의 줄바꿈.  (0) 2014.12.06
HTML5 Modernizr대신 HTML5지원 여부 알아보기..  (0) 2014.11.28
Posted by Z700zZz
HTML52015. 3. 13. 17:19

화면 해상도에 맞춰 페이지 변경..

웹페이지가 사용자가 보는 장비(휴대폰, 피씨, 패블릿 등)에 맞춰 해상도가 변경이 되고 화면의 구성이 바뀌는것을 구현하고 싶다면 아래와 같은 구문을 상단에 추가해주면 된다.


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />


위의 구문이 추가되지 않는다면 모바일 화면에서도 PC화면이 계속해서 나오는것을 볼수 있을것이다.

이거 안넣고 화면이 제대로 나오지 않는다고 난리난리 개난리를 떨었던게 생각나.......ㅁ

저작자표시

'HTML5' 카테고리의 다른 글

HTML5 Audio Element..  (0) 2015.04.27
HTML5 Video..  (0) 2015.02.14
HTML5 drawImage()..  (0) 2014.12.24
Html에서 Div와 TextArea의 줄바꿈.  (0) 2014.12.06
HTML5 Modernizr대신 HTML5지원 여부 알아보기..  (0) 2014.11.28
Posted by Z700zZz
HTML52015. 2. 14. 15:13

HTML5 Video..

HTML5 Video..


<head>

<meta charset="UTF-8">

<title>HTML5 Video</title>

</head>


<body>

<div>

<video autoplay loop controls id="thevideo" width="320" height="240">

<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >

<source src="muirbeach.webm" type='video/webm; codecs="vp8, vorbis"' >

<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"' >

</video>

</div>

<div>

(Right-click to Control)

</div>

</body>


</html>


아주 기본적인 소스이며 video태그 안에 source태그가 여러개인것을 볼수 있다.

video에서 지원하는 비디오 형식은 한정적이며 브라우저 마다 지원 하는 형식이 서로 다르다.

그래서 각각 인코딩 된 파일들을 여러개로 주고 브라우저는 순차적으로 비디오를 로딩 하다가 지원하는 코덱에 맞는 영상을 플레이 하게 된다.(한국말이지만 제대로 이해가 될지..)

video에 여러 옵션이 있다.



저작자표시

'HTML5' 카테고리의 다른 글

HTML5 Audio Element..  (0) 2015.04.27
화면 해상도에 맞춰 페이지 변경..  (0) 2015.03.13
HTML5 drawImage()..  (0) 2014.12.24
Html에서 Div와 TextArea의 줄바꿈.  (0) 2014.12.06
HTML5 Modernizr대신 HTML5지원 여부 알아보기..  (0) 2014.11.28
Posted by Z700zZz
HTML52014. 12. 24. 22:18

HTML5 drawImage()..

HTML5의 Canvas에 이미지를 출력 할 수 있는 방법은 drawImage()함수를 이용하는 방법이다.


drawImage(ImageObject, dx, dy);


이미지 오브젝트와 이미지의 시작점을 파라미터로 받는다.

이미지의 변형 없이 그대로 화면에 출력해주는 함수.


drawImage(ImageObject, dx, dy, dw, dh);


이미지 오브젝트와 이미지의 시작점, 이미지의 크기를 파라미터로 받는다.

이미지의 가로세로 크기를 파라미터로 받아 변형 된 이미지를 출력해주는 함수.


위의 사용 예는 단순히 이미지를 가져와 Canvas에 출력하고 크기를 늘리거나 줄여 출력하는 방법이다.

다음에 설명할 방법은 이미지에서 특정 부위만을 잘라서 사용하는 방법이다.


drawImage(imageObject, sx, sy, sw, sh, dx, dy, dw, dh);


각 파라미터에 대한 설명


imageObject : 이미지 객체

sx : tileSheet에서 사용할 이미지의 시작점 X

sy : tileSheet에서 사용할 이미지의 시작점 Y

sw : tileSheet에서 사용할 이미지의 가로 크기

sh : tileSheet에서 사용할 이미지의 세로 크기

dx : 출력할 이미지의 시작점 X

dy : 출력할 이미지의 시작점 Y

dw : 출력할 이미지의 가로 크기

dh : 출력할 이미지의 세로 크기




위의 이미지에서 두번째 비행기 이미지만을 잘라 화면에 출력함을 알수 있다.


저작자표시

'HTML5' 카테고리의 다른 글

HTML5 Audio Element..  (0) 2015.04.27
화면 해상도에 맞춰 페이지 변경..  (0) 2015.03.13
HTML5 Video..  (0) 2015.02.14
Html에서 Div와 TextArea의 줄바꿈.  (0) 2014.12.06
HTML5 Modernizr대신 HTML5지원 여부 알아보기..  (0) 2014.11.28
Posted by Z700zZz
HTML52014. 12. 6. 19:07

Html에서 Div와 TextArea의 줄바꿈.

어떠한 값을 TextArea로 입력을 받고, 그 값을 저장 하였다가 다시 불러와 TextArea가 아닌 Div에 뿌려줘야 하는 경우가 생긴다. 이럴 경우 생기는 문제가 두 태그간에 인식하는 줄바꿈 문자가 서로 다르다는것.

이러면 TextArea에서 입력 받은 값을 Div태그에 보여줄 경우 줄바꿈이 전혀 적용 되지 않고 1줄로 붙어서 나오는 상황이 발생한다. 이문제는 각태그에 인식하는 줄바꿈 문자로 바꿔서 값을 적용하면 된다.


TextArea에서 줄바꿈 문자로 인식하는 문자는 \r\n, \r, \n이고 Div에서 인식하는 줄바꿈 문자는 <br/> 태그이다.

그럼 TextArea에서 입력한 값에서 \n등의 줄바꿈 문자를 <br/>로 바꿔 저장하고, 불러와 Div태그에 그대로 넣으면 줄바꿈이 적용 되는것을 확인 할수 있다. 반대로 Div에 있던 값을 TextArea에 제대로 표현하고 싶다면 <br/>을 \r\n으로 변경해서 보여주면 줄바꿈이 제대로 표현 되는것을 볼 수 있다.


각 태그마다 줄바꿈 문자가 어떤것인지만 잘 생각해보면 이문제는 쉽게 해결할 수 있는데 왜 세시간 동안 헤맨거냐!!아....

저작자표시

'HTML5' 카테고리의 다른 글

HTML5 Audio Element..  (0) 2015.04.27
화면 해상도에 맞춰 페이지 변경..  (0) 2015.03.13
HTML5 Video..  (0) 2015.02.14
HTML5 drawImage()..  (0) 2014.12.24
HTML5 Modernizr대신 HTML5지원 여부 알아보기..  (0) 2014.11.28
Posted by Z700zZz
HTML52014. 11. 28. 22:17

HTML5 Modernizr대신 HTML5지원 여부 알아보기..

HTML5로 웹페이지를 개발 하는데 그 웹페이지를 여는 브라우저가 HTML5를 지원하는지 하지 않는지를 알아보기 위하여 Modernizr를 사용한다. 하지만 이것을 사용하지 않을 경우엔..


Modernizr.canvas;


위와 같은 명령어를 사용하면 사용 여부를 boolean으로 리턴을 하게 된다.


document.getElementById("canvas").getContext("2d");


위의 소스를 사용하면 같은 결과를 얻을 수 있다.

저작자표시

'HTML5' 카테고리의 다른 글

HTML5 Audio Element..  (0) 2015.04.27
화면 해상도에 맞춰 페이지 변경..  (0) 2015.03.13
HTML5 Video..  (0) 2015.02.14
HTML5 drawImage()..  (0) 2014.12.24
Html에서 Div와 TextArea의 줄바꿈.  (0) 2014.12.06
Posted by Z700zZz

티스토리툴바