2010년 9월 29일 수요일

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.

2010년 7월 22일 목요일

CSS transparent

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년 2월 23일 화요일

모바일 시뮬레이터

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

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

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

Html Reset CSS

[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]

2010년 2월 3일 수요일

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

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

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

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

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

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

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

2010년 1월 31일 일요일

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

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년 1월 27일 수요일

이미지 링크 보더??

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

나만의 공간

2010년 9월 29일 수요일

R5.4_for_32.48.00.32U.part15

R5.4_for_32.48.00.32U.part07

2010년 9월 4일 토요일

R5.4_for_32.48.00.32U.part01

2010년 8월 11일 수요일

HTML5 Video Tag Tutorial

HTML5 Video

Video Format

MIME Types

HTML for the Video Tag

Using JavaScript to Control HTML5 Video

HTML5 Video Events

2010년 7월 22일 목요일

CSS transparent

2010년 2월 23일 화요일

모바일 시뮬레이터

Html Reset CSS

2010년 2월 3일 수요일

HTML 5 Demos and Examples

HTML 5 Demos and Examples

Working

Html5

2010년 1월 31일 일요일

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

2010년 1월 27일 수요일

이미지 링크 보더??