나만의 공간

This tutorial demonstrates how to use the HTML5 video tag to embed video in a web page without the use of a browser plug-in. It will also show how to use JavaScript to control the playback of the video.

The HTML5 video tag has several advantages over Flash. For example, it is supported on mobile platforms such as the Apple iPhone that don't support Flash. Also, it alleviates the need for users to install yet another browser plug-in just to play video.

As of this writing, major browser support for the video tag is limited to Mozilla Firefox 3.5 or higher, and Google Chrome 3.0 or higher. Internet Explorer 8 does not support the video tag (that is, without the use of Google Chrome Frame), though it will reportedly be supported in the upcoming IE 9.

For this tutorial, you will need to have a browser that supports HTML5 video, as well as a video file to embed.

Video Format

There is still debate amongst browser vendors and web developers as to which, if any, video format should be the standard format for HTML5 video. Currently, both Firefox and Chrome support the Ogg Theora format, while Chrome supports H.264 MP4 and Firefox does not. Meanwhile, Microsoft has indicated a preference for supporting the H.264 MP4 format in IE 9.

Most video files can be converted to these formats using one of the following free tools:

MiroVideoConverter - GUI based Ogg Theora and H.264 MP4 converter for Windows and Mac.
SUPER - GUI based Ogg Theora and H.264 MP4 converter for Windows.
ffmpeg2theora - Command line Ogg Theora converter for Windows, Mac, and Linux.

MIME Types

First, make sure your web server is returning the correct MIME type for the video format that you are using. If the correct MIME type isn't being returned, the video tag will not work.

To add the MIME type for Ogg Theora video in Apache, add the following line to your.htaccess file:

AddType video/ogg ogv

And for H.264 MP4 video, add the following line:

AddType video/mp4 mp4

HTML for the Video Tag

The video tag itself is incredibly simple. The following HTML code will embed a video with standard playback controls built into the video element:

<video src="video.ogv" controls>

	Your browser does not support HTML5 video.

</video>

The "src" attribute specifies the video file to play, and the "controls" attribute indicates that the browser should provide its own playback controls. Any content inside the video tag will be rendered in browsers that do not support HTML5 video.

The result looks like this:

Additionally, the "autoplay" attribute can be used to make the video start to playing automatically, and the "loop" attribute will make the video play continuously in a loop.

Using JavaScript to Control HTML5 Video

Many features of the video tag can be automated using JavaScript. The following example code demonstrates how to use JavaScript to play, pause, and seek the video.

<video src="video.ogv" id="v">

	Your browser does not support HTML5 video.

</video>

<p>

<button onclick="document.getElementById('v').pause()">

	Pause</button>

<button onclick="document.getElementById('v').play()">

	Play</button>

<button onclick="document.getElementById('v').currentTime = 0">

	Back to Beginning</button>

<button onclick="document.getElementById('v').currentTime += 5">

	Skip 5 Seconds</button>

</p>

The pause() and play() methods are self-explanatory. The currentTime property returns the current playback location in seconds. Setting the currentTime property will result in the video seeking to the specified location.

This is the result:

HTML5 Video Events

It is also possible to respond to various HTML5 Video events using JavaScript. The following example listens for the "ended" event in order to display an alert box when playback of the video completes.

<video src="video.ogv" id="ve" controls>

	Your browser does not support HTML5 video.

</video>

<script>

var ve = document.getElementById('ve');

if(ve != null && ve.addEventListener) {

	ve.addEventListener(

		'ended', 

		function() { 

			alert('The video has ended.');

		}, 

		false);

}

</script>

And the result:

For more information about the HTML5 video interface, check out the W3C Working Draftand Mozilla developer documentation.

CSS transparent

2010-07-22T16:06:00.000+09:00

filter:alpha(opacity=50); For IE
-moz-opacity:0.5; For old versions of the Mozilla browser (Netscape)
-khtml-opacity: 0.5; For Safari 1.x. and Konqueror
opacity: 0.5;

모바일 시뮬레이터

2010-02-23T15:09:00.000+09:00

요즘은 모바일이 대세(?)라고들 한다...

작년 여름에 아는 지인이 모바일 인력이 많이 필요할거니 준비해두라고 그랬었는데 그때 준비를 했었더라면 좋았을텐데 하는 후회를 하지만 이제라도 시작하는게 어디더냐...

아무튼 내가 알고있는 모바일 시뮬레이터를 정리(?)하는 그런 글이 되는것인거다.

Html Reset CSS

2010-02-23T00:52:00.000+09:00

[code]body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}[/code]

HTML 5 Demos and Examples

2010-02-03T21:36:00.000+09:00

HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together:

Working

Interactive canvas gradients (Safari, Firefox)
Canvas & Video (Safari, Firefox)
Video (Safari, Firefox)
Canvas (all bar IE)
Content Editable (all latest browsers)
Geolocation (FF3.5, iPhone OS 3)
postMessage (same domain) (all latest browsers)
postMessage (cross domain) (all latest browsers)
drag and drop (IE, Safari 4, FF3.5)
drag anything (IE, Safari 4, FF3.5)
offline detection (FF3.5, iPhone OS 3)
offline application using the manifest (Safari 4, FF3.5.3) (Note: pre-FF3.5.3 has a bug)
Storage (all bar Opera)
Web Database Storage (Safari, iPhone OS 3)
Web Workers (watch out - uses a lot of CPU! example without - will hang your browser)

All content, code, video and audio is Creative Commons Share Alike 2.0

위 링크들은 내가 직접작성한것이 아니고 http://html5demos.com/ 이 사이트내용을 복사해온것임...

Html5

2010-02-03T21:24:00.000+09:00

아직도 웹표준에 낑낑대고있는데...

이제는 Html5를 건드려야 한단다. -0-

조만간 작업도 해야되고... 지난해말에 잠깐 깔짝거린적이 있지만 제대로 페이지 하나 만들어보지도 않았는데 걱정이 태산이군..

모바일과 Html5의 압박이 심상치가 않는 상황...

앞으로 깔짝깔짝거리면서 html5에 대해서 글이나 써봐야겠음!!!

이글에 이어서 가장기초적인거 적어둬야쥐...

iphone safari 회전시 폰트 사이즈 변경 버그

2010-01-31T14:35:00.000+09:00

iphone safari 에서 폰을 회전하면 세로모드 가로모드 전환이 되는데 여기서 폰트 사이즈가 커지는 문제가 발생을 한다.

이게 버그인지 아니면 의도된상황인지는 모르겠다.

그런데 분명 1:1.5의 비율로 커지는 부분이 있고 아닌부분이 발생을 한다.

여기저기 찾아보니 p태그가 연속해서 사용되어지는 부분에서 이런 문제가 발생하다는 글들이 많이 올라오고있고.....

그래서 아래와 같은 스크립트를 쓰라고 권장(?)하는곳이 있더라.

[code]javascript:for(i=0;i<document.getElementsByTagName ('*').length;i++)void(document.getElementsByTagName('*' )[i].style.fontSize='18pt');[/code]

~~위와같은 스크립트를 사용하게 되면 18pt로 모든 폰트가 고정이 된다고 한다.~~

~~그러나 우리나라 웹사이트들이 모든 폰트를 획일적으로 사이즈 고정하지 않지 않는가.~~

~~그래서 더 찾아보니....~~

나의 텍스트 건너뛰기 신공때문에 얼토당토한 결론을 내린 오류였음.

위에 스크립트는 아이폰에서 북마크해서 해당 페이지가 글자가 작을경우 북마크해둔걸 클릭해서 해당 페이지의 폰트사이즈를 18pt로 변경해주는 일종의 트릭(?)인거였음....

아무튼 아래걸로 내일 출근해서 테스트해봐야겠음.

html { -webkit-text-size-adjust: none;}

이걸로 하면 문제없이 된단다.

아직 적용해서 확인을 하지는 않았다.

오늘은 일요일.... -0-

아무튼.. 월요일에 저걸 실험해봐야겠다.

이미지 링크 보더??

2010-01-27T18:32:00.000+09:00

a {display:inline-block;overflow:hidden;}
a:hover {border:solid 6px #F00;}
a:hover img {display:block;margin:-6px;}
img {border:0;}

두개가 합쳐지면 쓸만한 보더가 생김.

ImgBorder_1.html

한문이름으로 인생의 굴곡을..

2009-12-17T12:42:00.000+09:00

[룩변환] 드루이드 나무폼 > 노겐포져

2009-10-20T10:45:00.000+09:00

드루이드 나무폼 -> 노겐포져 룩변환 파일.

patch-e.rar

jQuery TOOLS

2009-10-19T17:36:00.000+09:00

tabs, tooltip, overlay, expose, scrollable, flashembed 에 대한 구현

쓸만한것들이 있는 곳.

SWFObject: Javascript Flash Player detection and embed script

2009-10-15T16:01:00.000+09:00

오래전에 나왔던 플래시 삽입 스크립트.

그런데 얼마전에 알게 된곳이다. 이제는 IE 이올라스에 대한 것고는 상관없이 편리성(?)때문에 스크립트로 플래시를 삽입하고 있는데 이제는 플래시 대체 컨텐츠도 생각해야 할때이다.

반쪽짜리 웹표준 작업을 하느라 플래시 대체 컨텐츠는 만들지도 않고있는데.

SWFObject 를 사용하면 어느정도 해결이 가능할듯 하다.

http://blog.deconcept.com/swfobject/

swfobject1.5.zip

사용예 1.

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

정상적인 플래시를 보여줄때에는 위 div 안의 텍스트는 노출이 되지않는다. 다만 플래시를 불러오지 못하거나 플래시 플레이어가 지정한 플래이버젼보다 낮을 경우에 내용이 보여진다.

var so = new SWFObject(swf, id, width, height, version, background-color);

swf - swf 파일경로와 파일명.
id - object나 embed tag의 ID.
width - Flash movie width.
height - Flash movie height.
version - Flash content에서 요구하는 player 버전. format : 'majorVersion.minorVersion.revision'. ex) "6.0.65". 또는 major 버전만 기입해도 된다.
background color - background color.

사용예 2.

wmode=transparent 를 사용할시에 FF3.0 에서는 플래시 컨텐츠에 border 가생긴다고합니다.

해결방법은 아래와같이 css 를 추가하면 해결됨.

SWFObject 2.x 버젼

2.x 버전은 1.x와는 사용하는게 조금 달라졌다. 간편성에서는 1.x버젼이 좋을것 같은데 아직 실작업에 적용해보지는 않아서 확실한 판단은 불가... ^O^

swfobject_2_2.zip

http://code.google.com/p/swfobject/

Iframe Resize 2 (네이버)

2009-10-15T13:47:00.000+09:00

IE6, 8, FF, 구글크롬, 오페라 에서 테스트 되는걸 확인했음.

IE7에서 문제없이 될듯.

(다른 도메인간 iframe은 안됨.)

iframeResize2.zip

Iframe Resize

2009-10-15T13:41:00.000+09:00

IE6, 8, FF, 구글크롬, 오페라 에서 테스트 되는걸 확인했음.

IE7에서 문제없이 될듯.

(다른 도메인간 iframe은 안됨.)

iframeResize.zip

cssplay

2009-10-15T11:26:00.000+09:00

http://www.cssplay.co.uk/

여러가지 css 예제들이 있는곳. 클릭클릭해가면서 볼만한것들이 많다. 그러나 딱히 바로 적용하기에는 그닥...

메일링 작업시 Outlook 2007 유의사항

2009-10-14T17:55:00.000+09:00

이건 오래전부터 문제시 되어오던 문제인데 오늘 다시한번 이런 문제에 봉착해서 정리해서 올리는것.

예전에 진짜 초초초간단버전으로 정리 잘된 곳을 발견하고 회사 전체 메일로 보낸적이 있었는데 포맷하면서 보낸메일이 사라졌나보다 ㅡ.ㅡ;;

암튼. 각설하고.

아웃룩 2007에서 받을 메일링 작업시에 주의할것

1. 스크립트 (X)

2. 폼요소 (X)

3. 백그라운드 이미지 (X)

요 세가지만 우선적으로 지양하며 작업을 해야할것이다.

아래는 지원안하는 대표적인(?)것들.

no support for background images (HTML or CSS)
no support for forms
no support for Flash, or other plugins
no support for CSS floats
no support for replacing bullets with images in unordered lists
no support for CSS positioning
no support for animated GIFs

물론 나만 주의 한다고 해선 안될일. 기획, 디자인에서부터 유념해야할 것들임.

그리고 더 자세한 내용을 원한다면 아래 링크로 가서 참고를..

○ 아웃룩 2007에서 지원되는 또는 지원되지않는 태그, 속성, 스타일 들을 확인할 수 있습니다.

http://msdn.microsoft.com/en-us/library/aa338201.aspx

○ 제작된 이메일을 점검할 수 있는 HTML and CSS Validator에 대한 설명을

http://msdn.microsoft.com/en-us/library/aa338200.aspx

강별! 기억하니?

2009-10-13T17:02:00.000+09:00

올해초던가? 작년말이던가. 와우를 끊기위해서 갖은노력을 하던중에 알게된 케이블TV프로그램.

전진의 여고생 4.

한창 리얼리티가 유행하던 프로그램 포맷을 따라하던 이 프로그램.

문제아(?)인 여고생 네명을 모아놓고 전진이 아빠가 되어서 3달동안 같이 지내면서 펼쳐지는 내용들.

그중에 눈에 들어오던 범상치 않던 한 아이가 있었는데. 그아이가 강. 별.

그 강별이 프로그램 종료시점엔 외국인 고등학교였던가? 거기를 자퇴하고선 검정고시로 대학을 간다고 자막이 올라오던... 것을 기억하는데.. 그리고 많은 기획사에서 러브콜이 있었지만 마다하고 공부를 할거라고 하던 기억이 있는데...

한동안 잊고 있던 그 강. 별.이 지난주에 시작한 MBC 주말드라마 인연 만들기에 조연으로 나온다 ^O^

아무튼 간만에 보는 강별. 뭔가 조금은 달라졌지만 아직도 큰눈을 간직하고있구나.~~

사진보러가기

회드 룩변 영상

2009-10-12T21:27:00.000+09:00

Untitled.mp4

회드룩변

회드 룩변.

귀여워죽겠음. ㅋㅋ

그냥 다운받아서... 로컬에서 보세요.

문서형 선언(DOCTYPE)

2009-10-12T15:59:00.000+09:00

유효성 검사를 위해서는, 문서에 문서형 선언(혹은 DOCTYPE)이 포함되어 있어야 한다. DOCTYPE은 브라우저에 어떤 문서형 정의(DTD)를 적용할 것인가를 선언한다. 문서형 선언은 XHTML 문서의 가장 첫 부분에 위치해야 한다. XHTML 문서의 형 선언은 다음과 같다:

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 문서에서 문자 인코딩은 XML 선언이나 meta http-equiv 문에 반드시 명시되어야 한다. (만약 XML 문서에 인코딩이 기술되어 있지 않다면, 상위 프로토콜에서 미리 지정되지 않는 한, XML 해석기는 UTF-8이나 UTF-16으로 간주한다.)