HTML 5 Video Player.markdown

HTML 5 Video Player

Creating an html5 video player.

A Pen by Terri Neal on CodePen.

License.

index.html

<div class="videoContainer">
  <video id="video" width="480" height="360">
    <source src="http://html5demos.com/assets/dizzy.mp4"  type="video/mp4" />
    <source src="http://html5demos.com/assets/dizzy.webm"  type="video/webm" />
    <source src="http://html5demos.com/assets/dizzy.ogv"  type="video/ogv" />
    <!-- Fallback to flash -->
      <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=http://html5demos.com/assets/dizzy.mp4" width="1024" height="576">
         <param name="movie" value="flash-player.swf?videoUrl=http://html5demos.com/assets/dizzy.mp4" />
         <param name="allowfullscreen" value="true" />
         <param name="wmode" value="transparent" />
         <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
         <img alt="Dizzy Cat" src="" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
      </object>
      <!-- Downloadable -->
    <p> 
      Your browser doesn't support HTML5 video.
      <a href="http://html5demos.com/assets/dizzy.mp4">Download</a> the video of the dizzy cat instead.
  </p>
  </video>
  
   <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">PL</button>
    <input type="range" id="seek-bar" value="0">
    
    <!--<div class="progressTime">
      <span class="current"></span>
      <span class="duration"></span>
    </div>-->
    
    <button type="button" id="mute">MU</button>
    <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0">
    <button type="button" id="full-screen">FS</button>
  </div>
</div>

script.js

// Where all of the magic happens

(function() {
  
  'use strict';

// Video Element
var video = document.getElementById('video'),

// Buttons
    playButton = document.getElementById('play-pause'),
    muteButton = document.getElementById('mute'),
    fullScreenButton = document.getElementById('full-screen'),

// Sliders
    seekBar = document.getElementById('seek-bar'),
    volumeControl = document.getElementById('volume-control');

  // Wire up the play & pause buttons
 if (video) {
  playButton.addEventListener('click', function() {
    if (video.paused === true) {
      video.play();
       playButton.innerHTML = 'PA';
    } else {
      video.pause();
      playButton.innerHTML = 'PL';
    }
  });
 }

  // Make the video clickable as well
  video.addEventListener('click', function() {
    if (video.paused === true) {
      video.play();
       playButton.innerHTML = 'PA';
    } else {
      video.pause();
      playButton.innerHTML = 'PL';
    }
  });
  
  muteButton.addEventListener('click', function() {
    if (video.muted === false) {
      video.muted = true;
      muteButton.innerHTML = 'UM';
    } else {
      video.muted = false;
      muteButton.innerHTML = 'MU';
    }
  });
  
  // Full screen business
  
  fullScreenButton.addEventListener('click', function() {
    if (video.requestFullscreen) {
      video.requestFullScreen();
    } else if (video.mozRequestFullscreen) {
      video.mozRequestFullScreen(); // Fallback for Frefox
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(); // Fallback for Chrome & Safari
    }
  });
    
    // Seek and you shall find
    
    seekBar.addEventListener('change', function() {
      var time =  video.duration * (seekBar.value / 100);
      video.currentTime = time;
    });
  
  video.addEventListener('timeupdate', function() {
    var timeValue = (100 / video.duration) * videoCurrentTime;
    
    seekBar.timeValue = timeValue;
  });
  
  // Pump up the volume
  v

})();

style.css

// Declaring some variables
$black: #000000;
$bar: #423F3F;
$slate: #565555;
$white: #ffffff;

// Defining some styles
body {
  background-color: $white;
  color: $slate;
}

.videoContainer {
  margin: 25px auto 0 auto;
  position: relative;
  width: 480px;
}

#video-controls {
  background-color: $black;
	bottom: 0;
	left: 0;
  opacity: 0;
	padding: 5px;
  position: absolute;
  right: 0;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;
}

.videoContainer:hover #video-controls {
	opacity: .9;
}

button {
  background-color: $black;
  border: none;
  width: 50px;
}

button:hover {
   background-color: $black;
   color: $white;
}