Video

by giacal

HTML

<video>
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.mp4" type="video/mp4">
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.theora.ogv" type="video/ogv">
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.webm" type="video/webm">
</video>
        
<button id="play">play</button>
<button id="pause">pause</button>
<label for="volume">Volume:
    <input type="range" name="volume" id="volume" min="0" step="0.1" max="1"></label>

JavaScript

var play = document.querySelector("#play"),
    video = document.querySelector('video'),
    pause = document.querySelector("#pause"),
    volume = document.querySelector("#volume");  

play.setAttribute("disabled","disabled");

document.querySelector('video').addEventListener("canplaythrough", playPause, false);

function playPause(e){
         play.removeAttribute("disabled");        
         play.addEventListener("click", function(){video.play();}, false);
         pause .addEventListener("click", function(){video.pause();}, false);
         volume.addEventListener("input", function(){video.volume =          parseFloat(volume.value);}, false);
};