30秒後から再生     37秒後から再生

  [  /  ] Sec

<その3:Javascript を使用して字幕を表示する例です。(NHKクリエイティブ・ライブラリーが提供するフリー素材です)>


*HTML最初の行は、微妙な画像位置の取得ずれを防止するために記述しています。
*字幕スタイルは、「color.css」ファイルを参照してください。
*動作制御は、「caption.js」Javascriptを参照してください。
*その他、赤字箇所を注視してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<TITLE>V-03</TITLE>

<link rel='stylesheet' href='color.css' type='text/css' media='all' />

<style TYPE="text/css">
BODY, TH, TD {
  font-family: "Meiryo","Hiragino Kaku Gothic Pro","MS PGOTHIC", "Arial", sans-serif;
  font-size:14px;letter-spacing:1px;
}
  .setumei{font-size:14px; margin: 0px 1em 0px 1em; text-align:left;}
  .s1{font-family: "Meiryo","Hiragino Kaku Gothic Pro","MS PGOTHIC", "Arial", sans-serif;
      font-size:14px;letter-spacing:1px;
      color:#000000; background-color:#dededf;padding:20px;line-height:140%;}
  .s2{color:#ee0000;}
  .Ele {position:absolute; top:0px; left:0px;}
  A:link{ text-decoration:none; color:#000000; }
  A:visited{ text-decoration:none; color:#000080; }
  A:hover{background-color:blue; color:yellow; text-decoration:none;}
</style>

<script type="text/javascript" src="caption.js"></script>

<script type="text/javascript">
//----------------------------
// User set Document
//----------------------------
function CaptionDisp(){
/* -----------------------------------------
TimeOnOff(1, 2, 3, 4, 5, 6, 7);
1:表示開始秒
2:表示終了秒
3:左右位置("left" or "middle" or "right")
4:上からの表示位置(%) 0-->93
5:id名("id01"-"id08")
6:Selector Name (CSS)
7:"字幕文字列"
----------------------------------------- */
TimeOnOff(1,10,"middle","3","id01","yn","Javascriptによる字幕の表示です");
TimeOnOff(7,20,"middle","0","id02","Wn","この表示位置がディフォルトです");
TimeOnOff(29,39,"left","30","id03","rn","左合わせで、上から30%の位置です");
TimeOnOff(30,40,"right","70","id04","gn","右合わせで、上から70%の位置です");
TimeOnOff(25,42,"middle","80","id05","bn","中央合わせで、上から80%の位置です");
TimeOnOff(25,52,"left","50","id06","Kn","左合わせで、上から50%の位置です");
TimeOnOff(26,58,"middle","0","id07","yn","文字の修飾は、スタイルシートで設定します");
TimeOnOff(64,78,"left","10","id01","Wb","CSS Wb");
TimeOnOff(65,78,"left","30","id02","rb","CSS rb");
TimeOnOff(66,78,"left","50","id03","gb","CSS gb");
TimeOnOff(67,78,"left","70","id04","bb","CSS bb");
TimeOnOff(68,78,"right","20","id05","yb","CSS yb");
TimeOnOff(69,78,"right","40","id06","Kb","CSS Kb");
TimeOnOff(70,78,"right","60","id07","Wn","CSS Wn");
TimeOnOff(60,78,"right","80","id08","Kn","CSS Kn");
}
</script>

</head>
<body bgcolor="#fffff0" text="#000000" style="margin: 30px 10px 10px 10px;" onload="init_srt();">
<center>
<video id="demo" src="movie/noazami.mp4" width="640" height="360" autoplay loop controls>
</video>
<div>
<button onclick="document.getElementById('demo').play()">Play</button>
<button onclick="document.getElementById('demo').pause()">Pause</button>
<button onclick="document.getElementById('demo').volume+=0.1">Vol +</button>
<button onclick="document.getElementById('demo').volume-=0.1">Vol −</button>
<button onclick="document.getElementById('demo').currentTime+=5">+5 Sec</button>
<button onclick="document.getElementById('demo').currentTime-=5">-5 Sec</button>
</div>
<br>
<div>
<button onclick="document.getElementById('demo').currentTime=30">・00:30〜</button> 30秒後から再生    
<button onclick="document.getElementById('demo').currentTime=37">・00:37〜</button> 37秒後から再生<br>
</div>
<br>
<!--    -->
  [ <span id="ichi"></span> / <span id="allt"></span> ] Sec
<!--    -->
<div class="Ele"><span id="id01"></span></div>
<div class="Ele"><span id="id02"></span></div>
<div class="Ele"><span id="id03"></span></div>
<div class="Ele"><span id="id04"></span></div>
<div class="Ele"><span id="id05"></span></div>
<div class="Ele"><span id="id06"></span></div>
<div class="Ele"><span id="id07"></span></div>
<div class="Ele"><span id="id08"></span></div>

<hr>

〜略〜

</body>
</html>

*字幕スタイルを決める「color.css」ファイル内容です。
*背景によって見ずらくなるため、輪郭等を別色に替えるなどの工夫をしています。
/*
color.css  2015-06-12
字幕用カラー
*/
  .Kb{font-size:14pt; letter-spacing:2px; color: #000;
      text-shadow:1px 1px 15px #fff,1px -1px 15px #fff,-1px 1px 15px #fff,-1px -1px 15px #fff,
      1px 1px 0px #000,1px -1px 0px #000,-1px 1px 0px #000,-1px -1px 0px #000;}
  .Kn{font-size:14pt; letter-spacing:2px; color: #000;
      text-shadow:1px 1px 10px #fff,1px -1px 10px #fff,-1px 1px 10px #fff,-1px -1px 10px #fff,
      2px 2px 5px #fff,2px -2px 5px #fff,-2px 2px 5px #fff,-2px -2px 5px #fff;}
  .Wn{font-size:14pt; letter-spacing:2px; color: #fff;
      text-shadow:1px 1px 10px #000,1px -1px 10px #000,-1px 1px 10px #fff,-1px -1px 10px #000,
      2px 2px 5px #000,2px -2px 5px #000,-2px 2px 5px #000,-2px -2px 5px #000;}
  .Wb{font-size:14pt; letter-spacing:2px; color: #fff;
      text-shadow:1px 1px 15px #000,1px -1px 15px #000,-1px 1px 15px #000,-1px -1px 15px #000,
      1px 1px 0px #fff,1px -1px 0px #fff,-1px 1px 0px #fff,-1px -1px 0px #fff;}
  .gn{font-size:14pt; letter-spacing:2px; color: #0f0;
      text-shadow:1px 1px 10px #000,1px -1px 10px #000,-1px 1px 10px #fff,-1px -1px 10px #000,
      2px 2px 5px #000,2px -2px 5px #000,-2px 2px 5px #000,-2px -2px 5px #000;}
  .gb{font-size:14pt; letter-spacing:2px; color: #0f0;
      text-shadow:1px 1px 15px #000,1px -1px 15px #000,-1px 1px 15px #000,-1px -1px 15px #000,
      1px 1px 0px #0f0,1px -1px 0px #0f0,-1px 1px 0px #0f0,-1px -1px 0px #0f0;}
  .yb{font-size:14pt; letter-spacing:2px; color: #ff0;
      text-shadow:1px 1px 15px #000,1px -1px 15px #000,-1px 1px 15px #000,-1px -1px 15px #000,
      1px 1px 0px #ff0,1px -1px 0px #ff0,-1px 1px 0px #ff0,-1px -1px 0px #ff0;}
  .yn{font-size:14pt; letter-spacing:2px; color: #ff0;
      text-shadow:1px 1px 10px #000,1px -1px 10px #000,-1px 1px 10px #fff,-1px -1px 10px #000,
      2px 2px 5px #000,2px -2px 5px #000,-2px 2px 5px #000,-2px -2px 5px #000;}
  .rn{font-size:14pt; letter-spacing:2px; color: #f00;
      text-shadow:1px 1px 10px #ddd,1px -1px 10px #ddd,-1px 1px 10px #ddd,-1px -1px 10px #ddd,
      2px 2px 5px #ddd,2px -2px 5px #ddd,-2px 2px 5px #ddd,-2px -2px 5px #ddd;}
  .rb{font-size:14pt; letter-spacing:2px; color: #f00;
      text-shadow:1px 1px 15px #fff,1px -1px 15px #fff,-1px 1px 15px #fff,-1px -1px 15px #fff,
      1px 1px 0px #f00,1px -1px 0px #f00,-1px 1px 0px #f00,-1px -1px 0px #f00;}
  .bb{font-size:14pt; letter-spacing:2px; color: #00f;
      text-shadow:1px 1px 15px #fff,1px -1px 15px #fff,-1px 1px 15px #fff,-1px -1px 15px #fff,
      1px 1px 0px #00f,1px -1px 0px #00f,-1px 1px 0px #00f,-1px -1px 0px #00f;}
  .bn{font-size:14pt; letter-spacing:2px; color: #00f;
      text-shadow:1px 1px 10px #fff,1px -1px 10px #fff,-1px 1px 10px #fff,-1px -1px 10px #fff,
      2px 2px 5px #fff,2px -2px 5px #fff,-2px 2px 5px #fff,-2px -2px 5px #fff;}

*Javascript「caption.js」ファイル内容です。
/*
 caption.js  2015-06-12
 字幕制御
*/
var v, videoL, videoT, videoW, videoH;
//--------------------------------------------
// 初期実行 : onload="init_srt();"
//--------------------------------------------
function init_srt() {
v = document.getElementById("demo");
videoL=v.offsetLeft;  videoT=v.offsetTop;    // 要素の位置
videoW=v.offsetWidth; videoH=v.offsetHeight; // 要素の大きさ
get_time();
}
//--------------------------------------------
// 現在の再生位置(秒)及びトータル時間を表示
// 動画割り込みイベントの実行
//--------------------------------------------
function get_time() {
  v.addEventListener("timeupdate", function(){
    document.getElementById("ichi").innerHTML = time_ms(v.currentTime);
    document.getElementById("allt").innerHTML = time_ms(v.duration);
    CaptionDisp();
  }, false);
}
//----------------------------
// Document ON OFF
//----------------------------
function TimeOnOff(Stime,Etime,LMR,LINE,ID,Class,Doc){
  var element = document.getElementById(ID);
  var Time=v.currentTime;
//  if(Time == 0){element.innerHTML = "";}
  if(Time < Stime){return;}
//  if(Time > Etime+1){return;}
  if(Time > Stime && Time < Etime){
     element.style.left = '0px';
     element.innerHTML = "<span class='"+Class+"'>"+Doc+"</span>";
     element.style.position = 'relative';
     element.style.left = LeftPosition(LMR,videoW,videoL,element.offsetWidth)+'px';
     element.style.top  = TopPosition(LINE,videoT,videoH,element.offsetHeight)+'px';
  }else{
     element.innerHTML = "";
  }
}
//----------------------------
// Left/Right Position
//----------------------------
function LeftPosition(LMR,videoW,videoL,elWidth){
  if(LMR == "left"){
     return videoL+10;
  }else if(LMR == "right"){
     return Math.floor(videoW-elWidth+videoL)-10;
  }else if(LMR == "middle"){
     return Math.floor((videoW/2)+videoL-(elWidth/2));
  }else{
     return videoL+10;
  }
}
//----------------------------
// Top(%) Position
//----------------------------
function TopPosition(LINE,vT,vH,elHeight){
  var H=LINE.replace(/[a-z]|[A-Z]/g, ""); 
  var Y=Math.floor(elHeight/2)-4;
  if(isNaN(H)){H=0;}
  H=parseInt(H);
  if(H==0){H=93;}
  if(H>95){H=95;}
  H=Math.floor(vH*H/100);
  return H+vT-Y;
}
//----------------------------
// SS --> MM:SS
//----------------------------
function time_ms(sec){
 var m,s
 m = Math.floor(sec/60);
 s = Math.floor(sec-m*60); if(s<10){s="0"+s;}
 return m+":"+s;
}



※ 詳細はソースを見てください。なお、Firefox 以外では動作確認をしていません!