動的 TextTrack オブジェクト

新しいメディア メソッドを使って、クローズド キャプションの TextTrack オブジェクトや TextTrackCue オブジェクトを動的に HTML5 動画アプリに追加できます。

Internet Explorer 11 では、TextTrack オブジェクトと TextTrackCue オブジェクトをアプリから直接追加する 3 つの新しいメソッドがサポートされるようになりました。これらのメソッドの概要は、W3C HTML5 仕様に示されています。 これらの新しいメソッドを次に示します。

メソッド説明
addTextTrack TextTrack オブジェクトを現在の動画に追加します。
addCue 新しい TextTrackCue オブジェクトを TextTrack オブジェクトに追加します。
removeCue TextTrackCue オブジェクトを TextTrack オブジェクトから削除します。

 

Internet Explorer 10 では、Timed Text Markup Language (TTML) ファイルまたは Web Video Text Track (WebVTT) ファイルを作り、Track 要素と共に読み込むことによって、動画にクローズド キャプションを追加します。この方法は、あらかじめキューを作っていた場合は問題ありませんが、ファイルを読み込んだ後はテキストを変更できませんでした。Internet Explorer 11 ではより柔軟になり、ファイルを使わずにトラックやキューを動画に追加できるようになりました。これにより、いくつかの理由から、より多くのアプリでクローズド キャプションが使用できるようになりました。TTML ファイルまたは WebVTT ファイルを Web サーバーから送る場合、適切な MIME タイプを送る必要があります。サーバーで、テキスト トラックの MIME タイプではなく、動画の MIME タイプが設定されていることがよくあります。キャプション ファイルは、XMLHttpRequest (XHR) を使って単純なテキスト ファイルとしてクライアントに送信できます。TTML または WebVTT MIME タイプを使う必要はありません。開始時刻と終了時刻およびメッセージだけが含まれたキューを送り、実行時にクライアントで作られるトラックにキューを追加できます。

さらに、HTML5 Video Caption Maker に似た、動画を見ながらキャプションを書き込むことができるキャプション ツールを作成することもできます。新しいキューを作成するときに、キューをテキスト トラックに追加し、すぐに動画でテストすることができます。

TextTrack オブジェクトと TextTrackCue オブジェクトの追加

TextTrack オブジェクトと TextTrackCue オブジェクトを追加するには、最初にプログラムによって TextTrack を作ります。addTextTrack メソッドを使って、video 要素に関連付けられた空の TextTrack を作ります。 addCue を呼び出して、パラメーターとして開始時刻と終了時刻、表示するテキスト メッセージを指定することによって、TextTrack にキャプションを追加できます。

  キューは、addTextTrack を使って作成された TextTrack にのみ追加できます。 Track 要素を使ってファイルに読み込まれた TextTrack に適用した場合、Internet Explorer 11 は InvalidStateError をスローします。

次の例の video 要素では、controlsautoplaymuted の各属性を使って、組み込みの再生コントロールを提供し、読み込まれたときに動画の再生を開始してサウンドをオフにします。 これらの属性は、存在する場合は true になり、存在しない場合は false になるため、値を割り当てる必要はありません。 source 要素を使って、video のソース ファイルを設定します。このれでは汎用の動画ファイルを指定しているため、任意の mp4 動画に置き換えることができます。

TextTrackCue オブジェクトの開始時刻、終了時刻、および簡単なキャプション メッセージがループで作られます。開始時刻と終了時刻は、各メッセージが 5 秒間表示されるように設定されます。HTML5 動画の使い方について詳しくは、「HTML5 を使って Web ページで動画ファイルを再生する方法」をご覧ください。


<!DOCTYPE html >

<html >
  <head>
    <title>Add Text Tracks example</title>
</head>
<body>

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />   
  HTML5 Video not supported 
</video>

 <script>
   var video = document.getElementById("video1");
   var startTime, endTime, message;
   var newTextTrack = video.addTextTrack("captions", "sample");
   newTextTrack.mode = newTextTrack.SHOWING; // set track to display
   // create some cues and add them to the new track 
   for (var i = 0; i < 30; i++) {
     startTime = i * 5;
     endTime = ((i * 5) + 5);
     message = "This is number " + i;
     newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
   }
   video.play();
  </script>
</body>
</html>


TextTrack オブジェクトから TextTrackCue を削除する

removeCue を使って、既にある TextTrackCue を削除できます。次の例では、動画の再生を開始し、表示する各キューを取得します。2 番目のキューが見つかったら、キューが表示される前に removeCue を使って削除します。


<!DOCTYPE html >
<html >
  <head>
    <title>Remove Cue example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>

<video id="video1" controls muted autoplay>
    <source src="video.mp4">
    HTML5 Video not supported 
</video>

 <script type="text/javascript">
    var video = document.getElementById("video1");
    var beginTime, endTime, message; 
    var newTextTrack = video.addTextTrack("captions", "sample");
    newTextTrack.mode = newTextTrack.SHOWING; // set track to display
    // create some cues and add them to the new track 
    for(var i=0;i<10;i++){
        beginTime =  i * 5 ;
        endTime = ( (i * 5) +  5);
        message =  "This is number " + i; 
        newTextTrack.addCue(new TextTrackCue(beginTime, endTime, message));
    }
    //  Watch for cue change events
    newTextTrack.addEventListener("cuechange", function () {
            // get current cue, and remove it if it's number 2
            var currentCue = newTextTrack.activeCues[0];             
            if (currentCue.text == "This is number 2") {
                newTextTrack.removeCue(currentCue)
            }            
        },false);
     
  </script>
</body>
</html>


removeCue メソッドを使う場合、TextTrackCue オブジェクトはテキスト トラックの TextTrackCue と一致している必要があります。一致してない場合、NotFoundError 例外が発生します。

関連トピック

HTML5 を使って Web ページで動画ファイルを再生する方法
TextTrackCue
addTextTrack
removeCue
addCue

 

 

表示:
© 2014 Microsoft