CSS
동영상 화면
Bohemian life
2012. 6. 14. 12:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<style>
* { }
p { }
a ,li { }
ul li { /* ul엘리먼트의 차일드 li 에 적용해라 */
}
ol>li { /* ol을 부모로 가진 li */
}
div+span{ /*div바로 뒤에 있는 span에만 */ }
img[src$=".jpg"] { /* img태그의 src속성 값이 .jpg로 끝나는 것*/ }
img[src^="https"]{ /* img태그의 src속성 값이 .http로 시작하는 것*/ }
img[src*="carIMG/"] { /* 포함하고 있다면 */ }
table:first-of-type{ /* ul의 첫번째 자식에 적용해라 */ }
table:last-child{ /* 마지막 차일드에 적용해라 */}
ol:nth-child(2){ /* 2번째 자식에 적용해라 */}
ol:nth-child(2n){ /* 2,4,6,8... 자식에 적용해라 */}
ol:nth-last-child(3) { /* 뒤에서 3번째 자식에 적용*/}
[width=500]{ /* width속성값이 500인 것에 모두 적용 */}
[title~=flower] { /* 포함하고 있다면 */}
[type|=video] { /* type이란 attribute가 video로 시작한다면 */}
a:link { /* 한번도 방문한 적이 없는 링크*/ }
a:visited{ /* 방문한 적이 있는 링크*/ }
a:active{ /* 마우스를 누른 상태 */}
input:focus { /* 커서가 깜박 거릴때가 포커스된상태 */}
p:first-letter{ /* p태그의 첫번째 글자에 스타일을 주자 */}
div:first-line{ /* 첫줄에 스타일주기 */}
table:first-child { /* 첫번째 자식에게 스타일주기*/}
canvas:before{ /* 캔버스 바로 전 엘리먼트에게 */}
div:after{ /* 모든 div뒤쪽에 있는 엘리먼트에게 */ }
p:id(it){ /* p의 id어트리뷰트의 값이 it으로 시작하는 것*/}
p:empty{ /* 자식이 없는 p 에 적용하기*/}
#news:target{ /*id가 news인 모든 엘리먼트가 가리키는 대상 */}
input:enabled{ /* 입력이 가능한 모든 input엘리먼트에게 */}
input:disabled{ /* 입력이 불가능한 모든 input엘리먼트에게
hidden
*/}
input:checked{ /* 체크박스, 라디오 에 체크가 되었을때 */}
:not(p) { /* p 빼고 전부 적용 */ }
</style>
<script>
window.onload=function(){
buttons=document.getElementsByTagName("button");
videos=document.getElementsByTagName("video")
video=videos[0]; // 0이 최소 1이 최대
video.volume=0.5; //volume 이 setter메서드
alert(video.volume); //volume 이 필드(프라퍼티)
// video.setVolume=0.5;
// video.getVolume(); // oop
buttons[0].onclick=function(){
video.play();
div1.innerHTML+="play"; //setter 메서드
}
buttons[1].onclick=function(){
video.pause();
div1.innerHTML+="pause"; //setter 메서드
alert(video.currentTime);
}
buttons[2].onclick=function(){
//video.stop();
}
buttons[3].onclick=function(){
video.width=400;
}
buttons[4].onclick=function(){
video.width=800;
}
div1=document.getElementById("div1");
originalText = div1.innerHTML; //getter메서드
}
</script>
</head>
<body>
<video controls>
<!-- 사파리, ie9, 스마트폰, 크롬, -->
<source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4">
<!-- 파이어 폭스 -->
<source src="./sample2.webm" type="video/webm">
</video><br/>
<button> start </button>
<button> pause </button>
<button> stop </button>
<button> 원본 </button>
<button> 2배크기 </button>
<button> 2배크기 </button>
<div id="div1"> </div>
</body>
</html>