<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>
Ruby on Rails 를 리눅스에 설치하기