HTML5 - Not Your Father's TV: Video …With Special Guest Start "Canvas" - addEventListener, ended event, load method, play method

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 8.(Not Your Father's TV: Video …With Special Guest Start "Canvas")、SHARPEN YOUR PENCIL(No. 5616) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 5616)

コード(Emacs)

HTML5

<video id="video0" src="https://g0mria.by3302.livefilestore.com/y4mMODzWV7iEz2KwcrxQjSh4GWpQW8yhoC7Qyz15APBKouxH12tr8yxOdGckQQWuywvKA85g1xcWMqYxGd-3bLnzKruCWMDZ1gdIaFwhVAbf6KBas-GsxXADa_6Y1Up4m-GRqS-mceAqEzyM_dvvxYM4iEy3nIbgrxD3MZFxk7BVUPdzvLIRUnkQ8IcZ8ljR-MU/demovideo1.mp4" poster="" width="480" height="360" controls></video>
<br>
<pre id="output0"></pre>
<button id="clear0">clear</button>

<script src="sample1.js"></script>

JavaScript

let video = document.querySelector('#video0'),
    btn0 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let playlist = ['https://g0mria.by3302.livefilestore.com/y4mMODzWV7iEz2KwcrxQjSh4GWpQW8yhoC7Qyz15APBKouxH12tr8yxOdGckQQWuywvKA85g1xcWMqYxGd-3bLnzKruCWMDZ1gdIaFwhVAbf6KBas-GsxXADa_6Y1Up4m-GRqS-mceAqEzyM_dvvxYM4iEy3nIbgrxD3MZFxk7BVUPdzvLIRUnkQ8IcZ8ljR-MU/demovideo1.mp4',
                'https://gkmria.by3302.livefilestore.com/y4mlCtmmO8E-yeQODeKfX0NTqzamfwfcSi98GAuXC7cmr8gHJe2UL9wXQIo5EH5-jiXoyju8O6jjCX3H_mO7FBz_231AFPgKZarG4ms5PM5g9kaSftH1kjWip-swWEUQjEuB9px4XyvIl-g9WUcTB90PHwxi-CD_Co7Nww3xQmKVDRtLl3RcQfS7qHjg9B6cpbI/demovideo2.mp4'],
    i = 0;

video.addEventListener('ended',(event) => {
    i += 1;
    if (i === playlist.length) {
        i = 0;
    }
    p(`playlist #${i + 1}`);
    video.src = playlist[i];
    video.load();
    video.play();
});

btn0.onclick = () => pre0.textContent = '';