HTML5 Game - Create your own video player

Description

Create your own video player
Demo

<!DOCTYPE html>
<html lang="en">
<head>
<style>

video {//  w  ww .  ja  va  2 s . co m
  border: double 8px lightgray;
}

.videoContainer {
  max-width: 445px;
}

#positionBar {
  height: 30px;
  color: white;
  font-weight: bold;
  background: steelblue;
  text-align: center;
}

#positionBar span {
  display: inline-block;
  margin-top: 7px;
}

#durationBar {
  border: solid 1px black;
  width: 100%;
  margin-bottom: 5px;
}

#bufferBar {
  background: lightsteelblue;
  position: absolute;
}
</style>

<script>
let video;
let display;

window.onload = function() {
  video = document.getElementById("videoPlayer");

  display = document.getElementById("displayStatus");

  video.onplaying = function() {
    display.innerHTML = "Playing ...";
  }
  video.onpause = function() {
    display.innerHTML = "Paused";
  }
}

function progressUpdate() {
    let positionBar = document.getElementById("positionBar");
    positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";
  }

function play() {
  video.play();
}

function pause() {
  video.pause();
}

function stop() {
  video.pause();
  video.currentTime = 0;
}

function speedUp() {
  video.play();
  video.playbackRate = 2;
}

function slowDown() {
  video.play();
  video.playbackRate = 0.5;
}

function normalSpeed() {
  video.play();
  video.playbackRate = 1;
}

</script>
</head>

<body>
  <h1>World's Ugliest Video Player</h1>
<div class="videoContainer">
  <video id="videoPlayer" ontimeupdate="progressUpdate()">
    <source src="http://java2s.com/style/demo/your.webm" type="video/webm">
  </video>
</div>

<div class="barContainer">
  <div id="durationBar">
    <div id="positionBar"><span id="displayStatus">Idle.</span></div>
  </div>
</div>

  <div>
&nbsp;&nbsp;&nbsp;
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="stop()">Stop</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="speedUp()">Fast</button>
    <button onclick="slowDown()">Slow</button>
    <button onclick="normalSpeed()">Normal Speed</button>
  </div>


</div>
</body>
</html>
HTML5 Game - Create your own video player

Description

Demo

Related Topic
