그림처럼 웹페이지에 디자인을 하고자 한다.
어떻게 시나리오를 잡아서 진행해야 할까?
동영상 화면은 <VIDEO> 태그로 영역이 표시될 것이고 그 위에 버튼이 4개 있다. Play/Pause, Big, Small, Normal
화면밑에 Video courtesy of 텍스트가 있고 Big Buck Bunny 가 링크로 연결되어 있는 구조이다.
!DOCTYPE html 로 시작 html, body 영역을 설정한다.
영역설정 div를 지정하고 형태는 style="text-align:center" 로 해야 화면중앙에 버튼이 정열된다.
button onclick="playPause()" Play/Pause
button onclick="makeBig()" Big
button onclick="makeSmall()" Small
button onclick="makeNormal()" Normal
라인 줄을 띄우고 (BR사용)
video 태그로 id, width 를 설정한다. source 를 지정한다.
자바스크립트로 버튼의 클릭이벤트를 처리하도록 한다.
script type="text/javascript"
var myVideo=document.getElementById("video1") // Dom구조에서 video1 객체를 변수로 가져온다.
function playPause() // 객체에 대한 pause(), play() 함수를 호출한다. if myVideo.paused 속성 사용
function makeBig() // width : 560, function makeSmall() // width : 360, function makeNormal() // width : 420
텍스트에 대한 링크를 걸어준다.
Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>
희망잡이