<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>
<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<video id="video" src="sample.mp4" controls></video>
<p id="duration"></p>
<p id="currenttime"></p>
<script>
var myVideo = document.getElementById("video");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");
var textduration = document.getElementById("duration");
var textcurrenttime = document.getElementById("currenttime");
btnPlay.addEventListener("click", function(){myVideo.play();}, false);
btnPause.addEventListener("click", function(){myVideo.pause();}, false);
myVideo.addEventListener("loadedmetadata",
function(){textduration.innerHTML = "Duration: " + convertTime(myVideo.duration);},
false);
myVideo.addEventListener("timeupdate",
function(){textcurrenttime.innerHTML = "Current Time: " + convertTime(myVideo.currentTime);},
false);
function convertTime(org){
var minute = Math.floor(org/60) % 60;
var second = Math.floor(org%60);
return( minute + ' : ' + second);
}
</script>
</body>
</html>
Related:
- HTML5: Display current time and duration of Audio
No comments:
Post a Comment