html5 video basics

by Gustavo Carvalho

HTML

<!-- sample taken from: http://www.html5rocks.com/en/tutorials/video/basics/ -->
<div class="video-container">
    <p>Video sample</p>
    <video id="video" poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" controls>
        <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
        <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
    </video>
</div>

CSS

video {
    width: 200px;
    height: 112px;
    border: 1px solid black;
}
.video-container {
    display: inline-block;
    text-align: center;
}
p {
    font: 14px Arial;
}

JavaScript

var video = document.getElementById("video");

video.addEventListener("click", function (event) {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }    
    event.stopPropagation();
}, false);