SNOWFLAKES DRAWING PAPER
[HTML5] Video Player Control 본문
<!doctype html>
<html>
<style>
#conVideo {
display:block;
}
</style>
<body>
<div id="container">
<div>
<input id="btn" type="button" value="LOAD">
<input id="playBtn" type="button" value="PLAY">
<input id="pauseBtn" type="button" value="PAUSE">
<input id="prtBtn" type="button" value="PRT">
<input id="muteBtn" type="button" value="MUTE">
<input id="preBtn" type="button" value="REW">
<input id="nxtBtn" type="button" value="FWD">
<input id="sloBtn" type="button" value="slower">
<input id="fasBtn" type="button" value="faster">
<input id="norBtn" type="button" value="normal">
</div>
<div id="conVideo"></div>
<script type="text/javascript">
/*
reference url : http://msdn.microsoft.com/ko-kr/library/hh924822(v=vs.85).aspx
http://www.w3.org/2010/05/video/mediaevents.html
Miro Video Converter : http://www.mirovideoconverter.com
EasyHTML5Video : http://easyhtml5video.com/
*/
var videoElement = document.createElement("video");
videoElement.controls = true;
videoElement.width = 500;
var videoSource = document.createElement("source");
//videoSource.src = "11.mp4";
videoElement.appendChild(videoSource);
//document.body.appendChild(videoElement);
document.getElementById("conVideo").appendChild(videoElement);
videoElement.addEventListener("loadstart",onEvt,false);
videoElement.addEventListener("durationchange",onEvt,false);
videoElement.addEventListener("loadedmetadata",onEvt,false);
videoElement.addEventListener("loadeddata",onEvt,false);
videoElement.addEventListener("progress",onEvt,false);
videoElement.addEventListener("canplay",onEvt,false);
videoElement.addEventListener("canplaythrough",onEvt,false);
function onEvt(event) {
console.log(event.type);
console.log(event);
switch (event.type) {
case "loadstart":
console.log("duration : " + videoElement.duration);
break;
case "durationchange":
console.log("duration : " + videoElement.duration);
break;
}
}
function onClick_loadBtn(event) {
videoElement.src = "11.mp4";
videoElement.load();
}
function onClick_playBtn(event) {
videoElement.play();
}
function onClick_pauseBtn(event) {
videoElement.pause();
}
function onClick_prtBtn(event) {
var props = [
"autoplay"
,"buffered"
,"controls"
,"currentSrc"
,"currentTime"
,"duration"
,"ended"
,"loop"
,"muted"
,"networkState"
,"paused"
,"playbackRate"
,"played"
,"preload"
,"readyState"
,"seekable"
,"src"
,"volume"
];
var prop;
for (var i=0; i<props.length;i++)
{
prop = props[i];
console.log(prop + " : " + videoElement[ prop ]);
}
}
var currVolume = -1;
var muteFlag = false;
function onClick_muteBtn_bak(event) {
if (!muteFlag)
{
currVolume = videoElement.volume;
videoElement.volume = 0;
muteFlag = true;
}
else {
currVolume = -1;
videoElement.volume = currVolume;
muteFlag = false;
}
}
function onClick_muteBtn(event) {
if (videoElement.muted) {
videoElement.muted = false;
} else {
videoElement.muted = true;
}
}
function onClick_preBtn(event) {
setTime(-10);
}
function onClick_nxtBtn(event) {
setTime(10);
}
function setTime(tValue) {
try {
if (tValue == 0) {
videoElement.currentTime = tValue;
}
else {
videoElement.currentTime += tValue;
}
} catch (err) {
errMessage("Video content might not be loaded");
}
}
function setVol(value) {
var vol = videoElement.volume;
vol += value;
if (vol >= 0 && vol <= 1) {
videoElement.volume = vol;
} else {
videoElement.volume = (vol < 0) ? 0 : 1;
}
}
function onClick_sloBtn(event) {
videoElement.playbackRate -= .25;
}
function onClick_fasBtn(event) {
videoElement.playbackRate += .25;
}
function onClick_norBtn(event) {
videoElement.playbackRate = 1;
}
var btnLoad = document.getElementById("btn");
btnLoad.addEventListener("click",onClick_loadBtn,false);
var playBtn = document.getElementById("playBtn");
playBtn.addEventListener("click",onClick_playBtn,false);
var pauseBtn = document.getElementById("pauseBtn");
pauseBtn.addEventListener("click",onClick_pauseBtn,false);
var prtBtn = document.getElementById("prtBtn");
prtBtn.addEventListener("click",onClick_prtBtn,false);
var muteBtn = document.getElementById("muteBtn");
muteBtn.addEventListener("click",onClick_muteBtn,false);
var preBtn = document.getElementById("preBtn");
preBtn.addEventListener("click",onClick_preBtn,false);
var nxtBtn = document.getElementById("nxtBtn");
nxtBtn.addEventListener("click",onClick_nxtBtn,false);
var sloBtn = document.getElementById("sloBtn");
sloBtn.addEventListener("click",onClick_sloBtn,false);
var fasBtn = document.getElementById("fasBtn");
fasBtn.addEventListener("click",onClick_fasBtn,false);
var norBtn = document.getElementById("norBtn");
norBtn.addEventListener("click",onClick_norBtn,false);
</script>
</div>
</body>
</html>
'개발 > HTML5/CSS3' 카테고리의 다른 글
| [HTML5] 모바일 사이트에서 onorientationchange 구현 (0) | 2015.01.25 |
|---|---|
| [CSS3] 기본 버튼 스타일 (0) | 2015.01.22 |
| [HTML5] 로컬 저장소 (localStorage) 사용 (0) | 2015.01.22 |
| [HTML5] Geolocation (0) | 2012.08.13 |
| [HTML5] 캔버스 지원 여부 확인 (0) | 2011.11.01 |
