The HTML5 Video Element
Prev  Chapter 8. Document Object Model - I  Next

The HTML5 Video Element

The following HTML5 illustrates how to utilize the HTML5 video element that plays videos for the user without any plugins installed in your browser. 

<video id='movie' preload controls>
    <source src='movie.mp4'/> <!-- mp4 first -->
    <source src='movie.ogv' type='video/org; codecs="theora, vorbis"'/>
    <source src='movie.webm' type='video/webm; codecs="vp8, vorbis"'/>
    <p>   <!-- paragraph displays if video element not supported -->
        <a href='movie.ogv'>Download <i>Ogg</i> File</a>,
        <a href='movie.mp4'>Download <i>MP4</i> File</a>, or
        <a href='movie.webm'>Download <i>WebM</i> File</a>
    </p>
</video>
Example 8.19. Example Code for Audio and Video
<!doctype html>
<html>
<!-- js100.html -->
<head>
    <meta charset="utf-8"/>
    <title>Audio, Video Example</title>
    <link rel='stylesheet' href='ja100.css'/>
</head>
<body>
    <header>
    <h1>Audio and Video</h1>
    </header>
<main>
    <section>
    <h2>Audio</h2>
    <audio id='audio' preload controls>
        <source src='audio.wav' type='audio/wav'/>
        <source src='audio.ogg' type='audio/ogg'/>
        <source src='audio.mp3' type='audio/mpeg'/>
        <p> <!-- paragraph displays if audio element not supported -->
            <a href='audio.wav'>Download <i>wav</i> File</a>,
            <a href='audio.ogg'>Download <i>ogg</i> File</a>, or
            <a href='audio.mp3'>Download <i>mp3</i> File</a>
        </p>
    </audio>
    <p>
        Audio files from
        <a href='http://www.bigsoundbank.com/'>
        http://www.bigsoundbank.com/
        </a>
    </p>
    </section>

    <section>
    <h2>Video</h2>
    <video id='movie' preload controls>
        <source src='video.mp4'/> <!-- mp4 first -->
        <source src='video.ogv' 
                type='video/ogg; codecs="theora, vorbis"'/>
        <source src='video.webm' 
                type='video/webm; codecs="vp8, vorbis"'/>
        <p>   <!-- paragraph displays if video element not supported -->
            <a href='video.ogv'>Download <i>Ogg</i> File</a>,
            <a href='video.mp4'>Download <i>MP4</i> File</a>, or
            <a href='video.webm'>Download <i>WebM</i> File</a>
        </p>
    </video>
    <p>
      Video files from 
<a href='http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5'>
http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
</a>
    </p>
    </section>
</main>
<footer>
<address>&copy; nml, 2015-09-30</address>
</footer>
</body>
</html>

View in browser


Example 8.20. Jeremy Keith's Example of Individualized Controls

(for inspiration)

The three following pieces of code are available at github.com at this link location. It is explained in Jeremy Keith (2010) [Kei10a] chapter 11.

player.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>My Video</title>
        <link rel="stylesheet" href="styles/player.css"/>
        <script src="scripts/player.js"></script>
    </head>
    <body>
        <div class="video-wrapper">
            <video id="movie" controls>
                <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" />
                <source src="http://media.w3.org/2010/05/sintel/trailer.webm"
                    type='video/webm; codecs="vp8, vorbis"' />
                <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
                    type='video/ogg; codecs="theora, vorbis"' />
                <p>Download movie as
                    <a href="http://media.w3.org/2010/05/sintel/trailer.mp4">MP4</a>,
                    <a href="http://media.w3.org/2010/05/sintel/trailer.webm">WebM</a>,
                    or <a href="http://media.w3.org/2010/05/sintel/trailer.ogv">Ogg</a>.</p>
            </video>
        </div>
    </body>
</html>

styles/player.css

body {
  margin: 10px;
}

.video-wrapper {
  overflow: hidden;
}

.video-wrapper .controls {
  position: absolute;
  height:30px;
  width:30px;
  margin: auto;
  background: rgba(0,0,0,0.5);
}

.video-wrapper button {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  font-size: 17px;
  font-family: arial;
  color: #fff;
  background: transparent;
}

.video-wrapper button[paused] {
  font-size: 12px;
}

scripts/player.js

(function() {

    function createVideoControls() {
      var vids = document.getElementsByTagName('video');
      for (var i = 0 ; i < vids.length ; i++) {
        addControls( vids[i] );
      }
    }

    function addControls( vid ) {

      vid.removeAttribute('controls');


      vid.height = vid.videoHeight;
      vid.width = vid.videoWidth;
      vid.parentNode.style.height = vid.videoHeight + 'px';
      vid.parentNode.style.width = vid.videoWidth + 'px';

      var controls = document.createElement('div');
      controls.setAttribute('class','controls');

      var play = document.createElement('button');
      play.setAttribute('title','Play');
      play.innerHTML = '&#x25BA;';

      controls.appendChild(play);

      vid.parentNode.insertBefore(controls, vid);

      play.onclick = function () {
        if (vid.ended) {
          vid.currentTime = 0;
        }
        if (vid.paused) {
          vid.play();
        } else {
          vid.pause();
        }
      };

      vid.addEventListener('play', function () {
        play.innerHTML = '&#x2590;&#x2590;';
        play.setAttribute('paused', true);
      }, false);

      vid.addEventListener('pause', function () {
        play.removeAttribute('paused');
        play.innerHTML = '&#x25BA;';
      }, false);

      vid.addEventListener('ended', function () {
        vid.pause();
      }, false);
    }  // end of addControls

    window.addEventListener('load', function() {
            createVideoControls();
        }
    );

})()

Demo (teachers localhost only).


Prev  Up  Next
The HTML5 Audio Element  Home  Assignments JS.DOM.0