[html5] video 사용법[html5] video 사용법
Posted at 2012. 3. 15. 19:47 | Posted in 기타<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function funcTest() {
var waitingCount = 0;
var video = document.getElementById("myVideo");
var statu = document.getElementById("statu");
var time = document.getElementById("time");
var canplay = document.getElementById("canplay");
var waiting = document.getElementById("waiting");
var load = document.getElementById("load");
video.addEventListener("timeupdate", function(){
time.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " (초)"
}, false);
video.addEventListener("play", function(){
statu.innerHTML = "재생진입";
}, false);
video.addEventListener("playing", function(){
statu.innerHTML = "재생시작";
}, false);
video.addEventListener("ended", function(){
statu.innerHTML = "재생종료";
}, false);
video.addEventListener("canplay", function(){
canplay.innerHTML = "재생가능";
}, false);
video.addEventListener("waiting", function(){
waiting.innerHTML = waitingCount++;
}, false);
video.addEventListener("load", function(){
load.innerHTML = "데이터 다운로드완료";
}, false);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="funcTest()">
<video
id="myVideo"
width="400"
height="300"
poster="http://web.realpacking.com/img/top_logo.gif"
autoplay
controls
>
이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
<source
src="http://www.realpacking.com/data/down/sample.mp4"
type="video/mp4"
/>
</video>
<br/>
<hr />재생관련<hr />
<span>재생시간 : </span><span id="time"></span>
<br/><br/>
<span>현재상태 : </span><span id="statu"></span>
<br/><br/>
<span>canplay : </span><span id="canplay"></span>
<br/><br/>
<span>waiting : </span><span id="waiting"></span>
<hr />데이터 로드관련<hr />
<span>load : </span><span id="load"></span>
<br/><br/>
</BODY>
</HTML>
http://www.realpacking.com/lyr0404/video.php
'기타' 카테고리의 다른 글
| 아이티엔조이 조립컴퓨터 완전만족^^ (2) | 2015.03.27 |
|---|---|
| 아이툰즈(iTunes 10) 설치 오류, iPodService Module (32-bit) 오류 처리법 (0) | 2010.09.29 |
| 에그2 귀경길 고속도로등 속도측정 결과^^ (0) | 2010.09.23 |
| [에그체험기] 지하철에서 에그사용 (0) | 2010.09.17 |
| 아이툰즈 (iTunes 10) 설치 또는 업데이트 시, iPodService Module (32-bit) 오류 처리방법 (19) | 2010.09.15 |
아름다운총각의 세상
