Skip to content
Browse files

index2.htmlをコミット

  • Loading branch information...
1 parent c201a13 commit 463966d6bc78105535084f1e18f95efa3e8b3980 @ongaeshi committed Feb 26, 2011
View
77 index2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- saved from url=(0063)http://d2o0t5hpnwv4c1.cloudfront.net/373_html5/final/index.html -->
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>The Flower Blog</title>
+<link rel="stylesheet" href="index2/master.css" type="text/css" media="screen">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+<script type="text/javascript" src="js/telopper.js"></script>
+<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
+<script type="text/javascript" src="js/MyLib.js"></script>
+<script type="text/javascript" src="js/MovieLib.js"></script>
+<script type="text/javascript" src="js/LocalStorage.js"></script>
+<script type="text/javascript" src="js/main.js"></script>
+</head>
+<body>
+
+<header>
+<h1>Local Movie Player</h1>
+</header>
+
+<section>
+<div id="viewArea">
+ <video id="myVideo">
+ <source src="movie/kiso.mov">
+ <source src="movie/kiso.ogv">
+ <p>HTML5のvideoに対応したブラウザをご利用下さい</p>
+ </video>
+ <div id="telop"></div>
+ </div>
+
+ <div>
+ <input type="button" id="playButton" onclick="playVideo()" value="再生">
+ <span id="playTime">0</span>
+ </div>
+
+ <form>
+ <div class="subheader">テロップデータ</div>
+ <textarea id="telopCommand" cols="30" rows="15"></textarea>
+ </form>
+</div>
+</section>
+
+<div id="content">
+ <section id="comments">
+ <h3>Captures</h3>
+
+ <article>
+ <header>
+ <a href="#">capture</a> on <time datetime=""></time>
+ </header>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
+ </article>
+
+ <article>
+ <header>
+ <a href="#">capture</a> on <time datetime=""></time>
+ </header>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
+ </article>
+
+ <article>
+ <header>
+ <a href="#">capture</a> on <time datetime=""></time>
+ </header>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
+ </article>
+ </section>
+</div>
+
+<footer>
+ <div>
+ <section id="about">
+ </section>
+ </div>
+</footer>
+
+
+</body></html>
View
BIN index2/Thumbs.db
Binary file not shown.
View
BIN index2/flower.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN index2/intro_flower.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
362 index2/master.css
@@ -0,0 +1,362 @@
+/*------------------------------
+=BASIC SETUP
+------------------------------*/
+
+/* Makeshift CSS Reset */
+* {
+ margin: 0;
+ padding: 0;
+}
+
+/* Tell the browser to render HTML 5 elements as block */
+header, footer, section, aside, nav, article {
+ display: block;
+}
+
+body {
+ margin: 0 auto;
+ padding: 22px 0;
+ width: 940px;
+ font: 13px/22px Helvetica, Arial, sans-serif;
+ background: #F0F0F0;
+}
+
+h1, h2 {
+ font-size: 28px;
+ line-height: 44px;
+ padding: 22px 0;
+}
+
+h3 {
+ font-size: 18px;
+ line-height: 22px;
+ padding: 11px 0;
+}
+
+p {
+ padding-bottom: 22px;
+}
+
+
+
+/*------------------------------
+=NAVIGATION
+------------------------------*/
+
+nav {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ background: url("images/nav_background.png");
+}
+
+ nav ul {
+ margin: 0 auto;
+ width: 940px;
+ list-style: none;
+ }
+
+ nav ul li {
+ float: left;
+ }
+
+ nav ul li a {
+ display: block;
+ margin-right: 20px;
+ width: 140px;
+ font-size: 14px;
+ line-height: 44px;
+ text-align: center;
+ text-decoration: none;
+ color: #777;
+ }
+
+ nav ul li a:hover {
+ color: #fff;
+ }
+
+ nav ul li.selected a {
+ color: #fff;
+ }
+
+ nav ul li.subscribe a {
+ margin-left: 22px;
+ padding-left: 33px;
+ text-align: left;
+ background: url("images/rss.png") left center no-repeat;
+ }
+
+
+
+/*------------------------------
+=INTRODUCTION
+------------------------------*/
+
+#intro {
+ position: relative;
+ margin-top: 66px;
+ padding: 44px;
+ background: #467612 url("images/intro_background.png") repeat-x;
+
+ /* Background-size not implemented yet */
+ -webkit-background-size: 100%;
+ -o-background-size: 100%;
+ -khtml-background-size: 100%;
+
+
+ /* Border-radius not implemented yet */
+ -moz-border-radius: 22px;
+ -webkit-border-radius: 22px;
+}
+
+ #intro h2, #intro p {
+ position: relative;
+ z-index: 9999;
+ width: 336px;
+ }
+
+ #intro h2 {
+ padding: 0 0 22px 0;
+ font-weight: normal;
+ color: #fff;
+ }
+
+ #intro p {
+ padding: 0;
+ color: #d9f499;
+ }
+
+ #intro img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 653px;
+ height: 100%;
+
+ /* Border-radius not implemented yet */
+ -moz-border-radius: 22px;
+ -webkit-border-radius: 22px;
+ }
+
+
+
+/*------------------------------
+=CONTENT AREA AND SIDEBAR LAYOUT
+------------------------------*/
+
+#content {
+ display: table;
+}
+
+ #mainContent {
+ display: table-cell;
+ width: 620px;
+ padding-right: 22px;
+ }
+
+ aside {
+ display: table-cell;
+ width: 300px;
+ background: url("images/sidebar_background.png") top left;
+ }
+
+
+
+/*------------------------------
+=BLOG POST
+------------------------------*/
+.blogPost header p, .blogPost header p a {
+ font-size: 14px;
+ font-style: italic;
+ color: #777;
+ }
+
+ .blogPost header p a:hover {
+ text-decoration: none;
+ color: #000;
+ }
+
+.blogPost div {
+ /* Column-count not implemented yet */
+ -moz-column-count: 2;
+ -webkit-column-count: 2;
+
+ /* Column-gap not implemented yet */
+ -moz-column-gap: 22px;
+ -webkit-column-gap: 22px;
+}
+
+.blogPost img {
+ margin: 22px 0;
+ -webkit-box-shadow: 3px 3px 7px #777;
+}
+
+
+
+/*------------------------------
+=COMMENTS
+------------------------------*/
+
+#comments {
+ margin-top: 21px;
+ padding-top: 22px;
+ border-top: 1px solid #d7d7d7;
+}
+
+ #comments article {
+ display: table;
+ padding: 22px;
+ }
+
+ #comments article:nth-child(odd) {
+ padding: 21px;
+ background: #E3E3E3;
+ border: 1px solid #d7d7d7;
+ -moz-border-radius: 11px;
+ -webkit-border-radius: 11px;
+ }
+
+ #comments article header {
+ display: table-cell;
+ width: 220px;
+ padding-right: 22px;
+ }
+
+ #comments article header a {
+ display: block;
+ font-weight: bold;
+ color: #000;
+ }
+
+ #comments article header a:hover {
+ text-decoration: none;
+ }
+
+ #comments article p {
+ padding: 0;
+ }
+
+
+
+/*------------------------------
+=COMMENT FORM
+------------------------------*/
+form {
+ margin-top: 21px;
+ padding-top: 22px;
+ border-top: 1px solid #d7d7d7;
+}
+
+ form p {
+ display: table;
+ margin-bottom: 22px;
+ padding: 0 22px;
+ }
+
+ form label {
+ display: table-cell;
+ width: 140px;
+ padding-right: 20px;
+ text-align: right;
+ font-weight: bold;
+ vertical-align: top;
+ }
+
+ form input[type="text"], form input[type="email"], form input[type="url"] {
+ display: table-cell;
+ width: 300px;
+ height: 20px;
+ border: 1px solid #d7d7d7;
+ }
+
+ form textarea {
+ width: 300px;
+ height: 100px;
+ border: 1px solid #d7d7d7;
+ }
+
+ form input[type="submit"] {
+ margin-left: 162px;
+ }
+
+
+
+/*------------------------------
+=SIDEBAR
+------------------------------*/
+aside section {
+ margin: 22px 0 0 22px;
+ padding: 11px 22px;
+ background: url("images/sidebar_section_background.png") repeat-x;
+
+ /* Border-radius not implemented yet */
+ -moz-border-radius: 11px;
+ -webkit-border-radius: 11px;
+}
+
+ aside section ul {
+ margin: 0 0 0 22px;
+ list-style: none;
+ }
+
+ aside section ul li a {
+ display: block;
+ text-decoration: none;
+ color: #000;
+ }
+
+ aside section ul li a:hover {
+ text-decoration: underline;
+ }
+
+
+
+/*------------------------------
+=FOOTER
+------------------------------*/
+footer {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ background: #222;
+}
+
+ footer div {
+ display: table;
+ margin: 0 auto;
+ padding: 44px 0;
+ width: 940px;
+ color: #777;
+ }
+
+ footer div section {
+ display: table-cell;
+ width: 300px;
+ }
+
+ footer div #about, footer div #blogroll {
+ padding-right: 20px;
+ }
+
+ footer h3 {
+ color: #FFF;
+ }
+
+ footer a {
+ color: #999;
+ }
+
+ footer a:hover {
+ color: #FFF;
+ text-decoration: none;
+ }
+
+ footer ul {
+ margin: 0 0 0 40px;
+ list-style: square;
+ color: #565656;
+ }
+
+ footer ul li a {
+ display: block;
+ }
View
82 js/telopper.js
@@ -0,0 +1,82 @@
+var telopData = [], tID = [], timerID;
+
+var telopURL = "data/telop.js"; // テロップデータのURL
+var telopY = startY = 20; // テロップの表示Y座標
+var telopRight = 400; // テロップが登場する右端の座標:def400
+var telopOffset = 30; // テロップの表示位置のオフセット
+var telopBottom = 200; // テロップの下限の座標
+
+// ページが読み込まれたらテロップデータの読み込みと設定を行う
+window.addEventListener("load", function(){
+
+ $.get(telopURL, function(text){ // テロップデータを読み込む
+ document.getElementById("telopCommand").value = text;
+ telopData = eval(text);
+ });
+
+ // テキストエリア内のデータが更新されたらテロップデータを反映し、再度最初から再生する
+ document.getElementById("telopCommand").addEventListener("change", function(){
+ telopData = eval(document.getElementById("telopCommand").value);
+ playVideo();
+ }, true);
+}, true);
+
+// テロップの移動を行い、新たなテロップを追加する
+function moveTelop(){
+ // 再生時間を表示
+ document.getElementById("playTime").innerHTML = document.getElementById("myVideo").currentTime+"";
+
+ // テロップを移動させる処理
+ for(var i=0; i<tID.length; i++){
+ var x = parseInt(document.getElementById(tID[i]).style.left);
+
+ if (x > -1000){
+ document.getElementById(tID[i]).style.left = (x - 20) + "px";
+ }
+ }
+
+ // テロップを新たに追加するかどうか調べる
+ for(var i=0; i<telopData.length; i++){
+ if (checkTelop(telopData[i].id) == true) continue; // すでにテロップが表示されている場合はループの先頭へ
+
+ if (document.getElementById("myVideo").currentTime >= telopData[i].sec){
+ var ele = document.createElement("div"); // テロップを表示するdivを生成
+ ele.innerHTML = telopData[i].text; // 表示する文字を設定
+ ele.className = "message"; // テロップのスタイルシートを設定
+ ele.style.left = telopRight+"px";
+ ele.style.top = telopY+"px";
+
+ if (telopData[i].fontSize) ele.style.fontSize = telopData[i].fontSize;
+ if (telopData[i].color) ele.style.color = telopData[i].color;
+ if (telopData[i].top) ele.style.top = telopData[i].top;
+ tID.push(ele.id = telopData[i].id);
+ document.getElementById("telop").appendChild(ele);
+ telopY = telopY + telopOffset; // オフセットを加算
+ if (telopY > telopBottom) telopY = startY; // 画面下まできたら座標を上に戻す
+ }
+ }
+}
+
+// テロップが表示されているかどうか調べる。あればtrue、なければfalseを返す
+function checkTelop(checkID){
+ for(var j=0; j<tID.length; j++){
+ if (tID[j] == checkID) return true; // すでに表示している場合はtrueを返す
+ }
+ return false;
+}
+
+// 映像を再生する
+function playVideo(){
+ if (timerID) clearInterval(timerID);
+ tID = [];
+ var tDiv = document.getElementById("telop");
+ var tList = tDiv.getElementsByTagName("div"); // テロップを全て削除
+
+ for(var i=tList.length-1; i>=0; i--) tDiv.removeChild(tList[i]);
+ telopY = startY;
+ document.getElementById("myVideo").currentTime = 0;
+ document.getElementById("myVideo").play();
+ timerID = setInterval("moveTelop()", 100); // 0.1秒ごとにテロップを動かす
+
+ return false;
+}
View
BIN movie/kiso.mov
Binary file not shown.
View
BIN movie/kiso.ogv
Binary file not shown.

0 comments on commit 463966d

Please sign in to comment.
Something went wrong with that request. Please try again.