메뉴 건너뛰기

ㅇr름ㄷr운총각's 끄적끄적

프로그램
2014.11.26 14:18

[html5] video 사용법

조회 수 3511 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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



List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
12 프로그램 php 날짜 계산식 아름다운총각 2016.05.31 862
11 DB SQL 순위구하기 팁 아름다운총각 2015.06.02 1866
10 CSS 텍스트 줄바꿈, 글자자르기 CSS 아름다운총각 2015.02.27 3083
9 DB [mysql] 문자열의 일부를 반환하는 substr, substring_index 함수 아름다운총각 2015.02.13 3089
8 OS 리눅스에서 사용자 완벽 삭제방법 아름다운총각 2014.12.09 4579
7 OS [CentOS] 윈도우 네트워크드라이브 mount 방법 아름다운총각 2014.12.08 2881
6 DB 오라클 NVL함수 & DECODE함수 아름다운총각 2014.12.03 2950
5 DB [MySQL] 테이블 구조복사, 자료복사 아름다운총각 2014.12.01 2572
4 OS Ruby on Rails 를 리눅스에 설치하기 아름다운총각 2014.12.01 2635
» 프로그램 [html5] video 사용법 아름다운총각 2014.11.26 3511


Board Pagination Prev 1 ... 2 Next
/ 2