HTML5 - Not Your Father's TV: Video ...With Special GuestStart "Canvas"(poster attribute, ended event, onended)

Head First HTML5 Programming
Building Web Apps with Javascript
(O'Reilly Media)
Eric Freeman (著), Elisabeth Robson (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• HTML5 (マークアップ言語)
• JavaScript (プログラミング言語)

Head First HTML5 Programming: Building Web Apps with Javascript (Eric Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)のChapter 8(Not Your Father's TV: Video ...With Special Guest Start "Canvas")、SHARPEN YOUR PENCIL(No. 5618)を解いてみる。

その他参考書籍

• Head First HTML and CSS

SHARPEN YOUR PENCIL(No. 5618)

HTML5 (BBEdit, Emacs)

<section id="tv">
  <div id="tvConsole">
    <div id="videoDiv">          
      <video controls
             src="http://mkamimura.com/kamimura_blog/html5/head_first_html5_programming/chapter8/video/preroll.mp4"
             poster="http://mkamimura.com/kamimura_blog/html5/head_first_html5_programming/chapter8/images/prerollposter.jpg"
             width="650" height="360"
             id="video">
      </video>
    </div>
  </div>
</section>
<script>
var videos = ['preroll', 'areyoupopular', 'destinationearth'],
    video = document.getElementById('video'),
    url = 'http://mkamimura.com/kamimura_blog/html5/' +
        'head_first_html5_programming/chapter8/';
    video_i = 0,
    max = videos.length;
    playVideo = function () {
        if (video_i === max - 1) {
            video_i = 0;
        } else {
            video_i += 1;
        }
        video.poster = url + 'images/' + videos[video_i] + 'poster.jpg';
        video.src = url + 'video/' + videos[video_i] + '.mp4';
    };

video.onended = playVideo;
</script>