책보고 HTML5 + javascript로 퀴즈게임
따라하기.
이미 맞춘 문제가 다시 클릭 가능한 버그를 수정했고 다 맞출 경우 실행되는 동영상은 WebM으로만 작성했다.
따라서 인터넷 익스플로러에선 버전 상관없이 동영상의 재생은 안될 듯.
내 브라우저들에서 테스트해 본 결과 크롬, 쿨노보는 모두 잘 실행되고 파이어폭스의 경우 게임은 되는데
동영상이 실행 안되며 인터넷 익스플로러 7,8은 게임, 동영상 모두 실행이 안된다.
3ds Max로 만든 동영상 스틸컷.
동적으로 HTML 생성하기:
//country유형의 html요소
생성
d=document.createElement('country');
d.innerHTML=("<div
class='thing' id='"+uniqueId+"'>placeholder</div>");
//생성된 요소를 body 자식으로 문서에 추가
document.body.appendChild(d);
//생성된 요소의 참조 가져오기
thingElem=document.getElementById(uniqueId);
//요소의 textContent에 국가명 지정
thingElem.textContent=facts[c][0];
//top, left 속성을 변경해 세로, 가로 위치 지정
thingElem.style.top=String(my)+"px";
thingElem.style.left=String(mx)+"px";
//마우스 클릭 이벤트리스너 붙여넣기
thingElem.addEventListener('click', pickElement, false);
CSS 스타일로 thing Class 스타일과 Video 스타일 지정하기:
.thing{position: absolute; left: 0px;
top: 0px; border: 2px; border-style: double; background-color:
white; margin: 5px; padding: 5px;}
#vid{position: relative; left: 0px; top: 0px; visibility:
hidden; z-index: 0;}
HTML5의 비디오 태그:
<video id="vid" width
height controls="controls" preload="auto">
mp4: 익스플로러 ogv: 파이어폭스, 오페라 webm: 크롬
<source src="a.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
<source src="a.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<source src="a.webm" type='video/webm; codec="vp8,
vorbis"'>
this browser can't activate HTML5's video tag.
</video>
HTML5 비디오 지원 현황
Browser |
WebM |
Ogg Theora |
Mpeg-4 H.264 |
FireFox |
O |
O |
X |
Safari |
X |
X |
O |
Opera |
O |
O |
X |
Chrome |
O |
O |
O |
IE |
X |
X |
O |
HTML5 오디오 지원 현황
Browser |
Wav |
Ogg Vorbis |
MP3 |
FireFox |
O |
O |
X |
Safari |
O |
X |
O |
Opera |
O |
O |
X |
Chrome |
O |
O |
O |
IE |
X |
X |
O |
13/03/20 수
|