動画プレーヤーのHTMLを用意する
最初に、テロッパーで再生する動画ファイルとプレーヤー部分のHTMLを用意します。動画はH264（Safari／Google Chrome用）と、Theora/Ogg（Firefox／Opera用）の2種類のファイルを用意してください。動画の変換方法については以下の記事で解説しています。
HTML5 videoで作る“動くストリートビュー”
http://ascii.jp/elem/000/000/507/507722/index-3.html
動画ファイルの用意ができたら、動画を表示するためのHTMLを作成します。H264とTheora/Oggの2つのデータがあるので、video要素内にsource要素を2つ用意します。また、HTML5 videoに対応していないブラウザー向けに表示するメッセージも記述しておきます。
動画の上にテロップを重ねて表示するため、テロップ表示用の領域を<div id="telop">として用意します。このdiv要素の中に表示するテロップのテキストを記述していきますが、複数のテロップを表示する場合もあるので、<div id="telop">内にもう1つdiv要素を書いて入れ子にします。
<div id="viewArea">
<video id="myVideo" autoplay>
<source src="movie/kiso.mov">
<source src="movie/kiso.ogv">
<p>HTML5のvideoに対応したブラウザーをご利用下さい</p>
</video>
<div id="telop">
<div id="myTelop">テロップのサンプルです。</div>
</div>
</div>
あとは<div id="telop">の中のdiv要素をスクリプトで移動させればテロップの基本動作はできあがりですが、このままだとテロップの文字数が多い場合に動画から文字がはみ出てしまいますし、動画の右側に配置した文字がページ上の他の要素と被ってしまいます。そこで、video要素とテロップ領域全体を<div id="viewArea">で囲み、表示範囲をスタイルシートで指定します。
#viewArea{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
clip : rect(26px 384px 242px 0px);
}
以上でHTMLの準備は完了です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 流れるテロップ</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/telopper.js"></script>
</head>
<body>
<h1>HTML5 流れるテロップ</h1>
<div id="viewArea">
<video id="myVideo" autoplay>
<source src="movie/kiso.mov">
<source src="movie/kiso.ogv">
<p>HTML5のvideoに対応したブラウザーをご利用下さい</p>
</video>
<div id="telop">
<div id="myTelop">テロップのサンプルです。</div>
</div>
</div>
</body>
</html>
