■ caption.htm ■

戻る 

<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>勝手に字幕</TITLE>
</HEAD>

<BODY STYLE="background-color:#CCFFFF">
<DIV STYLE="text-align:center">
<BR>
<B>勝手に字幕</B>
<BR><BR>

<FORM onSubmit="return false">
動画 URL:
<INPUT TYPE=TEXT ID="file" SIZE=60 onKeyPress="if(event.which == 13) open_video()">
<INPUT TYPE=BUTTON VALUE="開く" onClick="open_video()">
</FORM>
<BR>

<DIV ID="wid1" STYLE="width:420px; margin-left:auto; margin-right:auto">
<DIV ID="base" STYLE="position:relative; width:320px; height:240px; background-color:black; margin-left:auto; margin-right:auto">
<VIDEO ID="vid" AUTOPLAY STYLE="position:absolute; left:0; top:0"></VIDEO>
<SPAN ID="txt" STYLE="position:absolute; left:0; bottom:0; padding:2px; font-weight:bold; color:white; text-shadow:black 0 0 0.3em; cursor:default">
</SPAN>
</DIV>
</DIV>

</DIV>

<DIV ID="wid2" STYLE="position:relative">
<SPAN ID="txt2" STYLE="position:absolute; padding:2px; font-weight:bold; visibility:hidden"></SPAN>
</DIV>

<SCRIPT TYPE="text/javascript">
<!--

function open_video() {
  if(to_id != undefined) {
    clearTimeout(to_id);
    to_id = undefined;
  }
  elem_txt.innerHTML = "";

  var loc = document.getElementById("file").value.trim();
  if(!loc.length)
    return;

  elem_vid.src = loc;
  elem_vid.load();
}

function vid_loaded() {
  if(!(vid_w = elem_vid.videoWidth))
    vid_w = 320;
  if(!(vid_h = elem_vid.videoHeight))
    vid_h = 240;
  elem_base.style.width = elem_txt.style.width = String(vid_w) + "px";
  elem_base.style.height = String(vid_h) + "px";
  document.getElementById("wid1").style.width = document.getElementById("wid2").style.width
    = String(vid_w + 100) + "px";
  elem_txt.style.fontSize = elem_txt2.style.fontSize
    = String(Math.max(11, 7 + Math.floor(vid_w / 80))) + "pt";
}

function vid_play() {
  // なぜか動画をロードしていないのにイベントが発生するときがある
  if(elem_vid.src == "")
    return;

  to_id = setTimeout(new_cap, 3000);
}

function vid_pause() {
  clearTimeout(to_id);
  to_id = undefined;
}

function vid_ended() {
  clearTimeout(to_id);
  to_id = undefined;
  elem_txt.innerHTML = "";
}

function new_cap() {
  elem_txt.innerHTML = elem_txt2.innerHTML = caption[Math.floor(Math.random() * caption.length)];
  elem_txt.style.textAlign = (elem_txt2.clientWidth > vid_w) ? "left" : "center";

  to_id = setTimeout(new_cap, 7000 + Math.floor(Math.random() * 3000));
}

function txt_mouse(e) {
  e.preventDefault();
}

//----------------------------------------------------------

  caption = [
    "世界初公開の貴重な映像です。",
    "身の毛もよだつ恐怖の心霊映像",
    "衝撃映像！ カメラが捉えた決定的瞬間！",
    "独占スクープ映像！ Ｙ＆Ｋ密会の現場！",
    "決算大セール！ 赤字覚悟の大安売り！",
    "1個 100円、5個で 400円にオマケ！",
    "全国の書店、コンビニにて絶賛発売中！",
    "地球にやさしい、とってもエコな製品です。",
    "古池や　坊主転んで　河童の屁",
    "To be, or not to be, that is the question.",
    "<SPAN STYLE='font-size:120%'>This is a pen.</SPAN>",
    "メリーさん、メリーさん、私はあなたを愛します。",
    "材料 … ご飯：茶碗1杯　玉子：1個　醤油：少々",
    "この洗練されたフォルム、優雅な走り！",
    "画期的な大発明 !!",
    "驚異のスーパー テクノロジー",
    "Ｅ ＝ ｍ ｃ<SUP>2</SUP>",
    "今日は全国各地で記録的な猛暑となりました。",
    "明日は猛烈な寒波が押し寄せることが予想されます。",
    "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>外</SPAN><SPAN STYLE='position:absolute; left:0.6em; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>げ</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>道</SPAN><SPAN STYLE='position:absolute; left:0; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>どう</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>照</SPAN><SPAN STYLE='position:absolute; left:-0.2em; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>しょう</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>身</SPAN><SPAN STYLE='position:absolute; left:0.1em; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>しん</SPAN>"
  + "<SPAN STYLE='font-size:1.3em'>　</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>霊</SPAN><SPAN STYLE='position:absolute; left:0; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>れい</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>波</SPAN><SPAN STYLE='position:absolute; left:0.6em; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>は</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>光</SPAN><SPAN STYLE='position:absolute; left:0; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>こう</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>線</SPAN><SPAN STYLE='position:absolute; left:0; top:-1.6em; font-size:0.6em; width:3em; text-align:left'>せん</SPAN>",
    "なんでやねん！",
    "あなたは醤油派？ それともソース派？",
    "太古の地球の様子",
    "古より連綿と受け継がれし匠の技",
    "（ 上底 ＋ 下底 ） × 高さ ÷ ２",
    "HCl ＋ NaOH → NaCl ＋ H<SPAN STYLE='font-size:70%'>2</SPAN>O",
    "３ＬＤＫ　日当たり良好　駅より徒歩３分",
    "時給1000円　9:00〜20:00の間　週3〜4日",
    "レベル ３　ライフ ３２００　スコア ２３７００",
    "人類滅亡の時まで、あと２９１日",
    "使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。",
    "この物語はフィクションであり、登場する人物・団体等の名称はすべて架空のものです。",
    "冬はつとめて。雪の降りたるはいふべきにもあらず。",
    "巧言令色鮮矣仁　剛毅木訥近矣仁"
  ];

  elem_base = document.getElementById("base");
  elem_vid = document.getElementById("vid");
  elem_txt = document.getElementById("txt");
  elem_txt2 = document.getElementById("txt2");

  elem_vid.addEventListener("loadedmetadata", vid_loaded, false);
  elem_vid.addEventListener("play", vid_play, false);
  elem_vid.addEventListener("pause", vid_pause, false);
  elem_vid.addEventListener("ended", vid_ended, false);

  with(elem_txt) {
    onmousedown = onmouseup = onclick = oncontextmenu = txt_mouse;
  }

  to_id = undefined;

  // ページを再ロードしたときのため
  document.forms[0].reset();

//-->
</SCRIPT>

</BODY>

</HTML>