뭔가 그럴듯한 페이지(자랑스럽다)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body>
<h3>HTML5동영상 재생</h3>
<video id="a_video" src="VIDEO0004.mp4">
<source src="VIDEO0004.mp4" type="video/mp4"/>
video태그가 지원하지 않습니다.
<a href="VIDEO0004.mp4">link</a>
</video>
<div>
<input id="play_btn" type="button" value="재생" />
<input id="pause_btn" type="button" value="정지" />
<input id="play2_btn" type="button" value="처음부터 재생" />
</div>
<div id="info"></div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var a_video = $("a_video");
a_video.addEventListener("timeupdate", function() {
$("info").innerHTML = a_video.currentTime + "/" +
a_video.duration;
});
$("play_btn").onclick = function() { a_video.play(); }
$("pause_btn").onclick = function() { a_video.pause(); }
$("play2_btn").onclick = function() {
a_video.currentTime = 0;
a_video.play();
};
</script>
</body></html>
'html5' 카테고리의 다른 글
| html5 herald register (0) | 2014.09.15 |
|---|---|
| html/css #1 (0) | 2014.04.09 |
| LocalStorage (0) | 2013.02.26 |
| canvas #10 화상 Image 그리기(이미지 잘라내서 크기조절해서 붙이기) (0) | 2013.02.22 |
| canvas #10 화상 Image 그리기 (0) | 2013.02.22 |