media controls

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<hr>
<h1>The video element</h1>
<div id="ePlayer">
<video width="320" height="240" id="player">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<div id="playerButtons">
  <button onclick="playVid()" type="button">Play Video</button>
  <button onclick="pauseVid()" type="button">Pause Video</button><br> 

</div>
</div>

</div>

CSS

html,body {
	color: #454545;
}

.container {
	margin-top: 25px;
}

audio,video {
	border: 1px solid #F9F9F9;
	width: 100%;
  background: #000000;
}

#ePlayer,#playerButtons {
	border: 1px solid #F9F9F9;
	width: 100%;
  background: #000000;
  text-align: center;
  vertical-align: baseline;
}
#playerButtons {
  padding: 5px 5px 5px 5px;
}

JavaScript

var vid = document.getElementById("Player"); 

function playVid() { 
  vid.play(); 
} 

function pauseVid() { 
  vid.pause(); 
}