■ caption2.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>
<TABLE STYLE="margin-left:auto; margin-right:auto"><TR><TD STYLE="text-align:left; white-space:nowrap">
<B>ファイル：</B><BR>
<INPUT TYPE=FILE ID="file" SIZE=60 onChange="sel_file()"><BR><BR>
<INPUT TYPE=BUTTON ID="play" VALUE="再生" DISABLED onClick="play_stop()">
</TD></TR></TABLE>
</FORM>
<BR>

<DIV ID="base" STYLE="position:relative; width:320px; height:240px; background-color:black; margin-left:auto; margin-right:auto">
<VIDEO ID="vid" STYLE="position:absolute; left:0; top:0"></VIDEO>
<DIV STYLE="position:absolute; left:0; right:0; bottom:0; pointer-events:none">
<SPAN ID="txt" STYLE="display:inline-block; text-align:left; padding:2px; font-weight:bold; color:white; text-shadow:black 0 0 0.3em; pointer-events:none">
</SPAN>
</DIV>
</DIV>

</DIV>

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

function sel_file() {
  if(url_cre)
    URL.revokeObjectURL(elem_vid.src);
  elem_vid.src = URL.createObjectURL(elem_file.files.item(0));
  url_cre = true;
  elem_vid.load();
}

function play_stop() {
  if(playing) {  // 再生中
    // 停止
    elem_vid.pause()
    stop();
    return;
  }

  elem_vid.play();
}

function vid_canplay() {
  if(!elem_vid.videoWidth) {
    elem_play.disabled = true;
    alert("再生できません。");
    return;
  }

  elem_base.style.width  = String(elem_vid.videoWidth)  + "px";
  elem_base.style.height = String(elem_vid.videoHeight) + "px";
  elem_txt.style.fontSize = String(Math.max(11, 7 + Math.floor(elem_vid.videoWidth / 80))) + "pt";

  elem_play.disabled = false;
}

function vid_play() {
  if(elem_play.disabled)
    return;

  if(!playing) {  // 再生中でない
    elem_file.disabled = true;
    elem_play.value = "停止";
    playing = true;
  }
  to_id = setTimeout(new_cap, 3000);
}

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

function vid_ended() {
  stop();
}

function vid_error() {
  elem_play.disabled = true;
  alert("再生できません。");
}

function stop() {
  if(to_id) {
    clearTimeout(to_id);
    to_id = 0;
  }
  playing = false;
  elem_txt.innerHTML = "";
  elem_vid.currentTime = 0;
  elem_file.disabled = false;
  elem_play.value = "再生";
}

function new_cap() {
  elem_txt.innerHTML = caption[Math.floor(Math.random() * caption.length)];

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

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

  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.55em; 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.55em; text-align:left'>どう</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>照</SPAN><SPAN STYLE='position:absolute; left:-0.3em; top:-1.6em; font-size:0.55em; text-align:left'>しょう</SPAN>"
  + "<SPAN STYLE='position:relative'><SPAN STYLE='font-size:1.3em'>身</SPAN><SPAN STYLE='position:absolute; left:0.3em; top:-1.6em; font-size:0.55em; 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.1em; top:-1.6em; font-size:0.55em; 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.55em; 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.55em; 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.55em; text-align:left'>せん</SPAN>",
    "なんでやねん！",
    "あなたは醤油派？ それともソース派？",
    "太古の地球の様子",
    "古より連綿と受け継がれし匠の技",
    "（ 上底 ＋ 下底 ） × 高さ ÷ ２",
    "HCl ＋ NaOH → NaCl ＋ H<SPAN STYLE='font-size:70%'>2</SPAN>O",
    "３ＬＤＫ　日当たり良好　駅より徒歩３分",
    "時給1000円　9:00〜20:00の間　週3〜4日",
    "レベル ３　ライフ ３２００　スコア ２３７００",
    "人類滅亡の時まで、あと２９１日",
    "使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。",
    "この物語はフィクションであり、登場する人物・団体等の名称はすべて架空のものです。",
    "冬はつとめて。雪の降りたるはいふべきにもあらず。",
    "巧言令色鮮矣仁　剛毅木訥近矣仁"
  ];

  elem_file = document.getElementById("file");
  elem_play = document.getElementById("play");
  elem_base = document.getElementById("base");
  elem_vid = document.getElementById("vid");
  elem_txt = document.getElementById("txt");

  elem_vid.addEventListener("canplay", vid_canplay, false);
  elem_vid.addEventListener("play", vid_play, false);
  elem_vid.addEventListener("pause", vid_pause, false);
  elem_vid.addEventListener("ended", vid_ended, false);
  elem_vid.addEventListener("error", vid_error, false);

  playing = false;
  url_cre = false;
  to_id = 0;

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

//-->
</SCRIPT>

</BODY>

</HTML>