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)を解いてみる。
その他参考書籍
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>
0 コメント:
コメントを投稿