- 締切済み
動画の再生に同期させ説明文を表示したい
操作説明のWebページを作りたいのですが、どうしたら良いか分かりません。 画面構成としては・・ １．左隅に作業進捗に応じたセレクタを表示 ２．右側全てをビデオ表示領域として利用 ３．上記下部に再生中のビデオの進捗に合わせ、説明書きを表示 現在セレクタをクリックすると、該当するビデオを表示させるところまで 作成することができたのですが、ビデオの再生と同時に説明書きを表示・更新してゆく方法がどうしてもわかりません。 どなたか、ご教示頂けますでしょうか。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
回答No.1
動画の中にテロップとしてうめこむか フラッシュなどプログラムとリンクする形式の 動画をつかうくらいでしょうか・・・。
補足
こんなイメージでしょうか・・ 動画の再生と同時にタイムカウントを初め、内容の進捗に合わせてテキスト を更新して行く・・ 他にも方法は有るのかも知れませんが、なにぶん初心者でイメージが湧きません。 下記にソースを添付させていただきます。 ---FileName : Sample02.htm--- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- saved from url=(0033)file://C:\WEBTMP\Sample02.htm --> <HTML> <HEAD> <TITLE>ＳＡＭＰＬＥ＜００１＞</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:hover { background-color:#ffcccc;} --> .time{behavior:url(#default#time2);} </style> </HEAD> <BODY> <CENTER><FONT size=6>ＳＡＭＰＬＥ＜００１＞</FONT> <TABLE width="750" border="3"> <TBODY> <TR> <TD width="193"><BR> １．<A href="myhp_02.htm" target="mid_wav">エコー装置の起動</A><BR> <BR> <BR> ２．<A href="myhp_03.htm" target="mid_wav">プローブの除菌</A><BR> <BR> <BR> ３．<A href="myhp_04.htm" target="mid_wav">モード選択</A><BR> <BR> <BR> ４．<A href="myhp_001.htm" target="mid_wav">プローブの位置</A><BR> <BR> <BR> ５．<A href="myhp_002.htm" target="mid_wav">作業のコツ</A><BR> <BR> <BR> ６．<A href="myhp_003.htm" target="mid_wav">メジャーリング</A><BR> <BR> <BR> ７．<A href="myhp_004.htm" target="mid_wav">キモ</A><BR> </TD> <TD width="537"> <CENTER> <TABLE border="0"> <TBODY> <TR> <TD width="518"> <CENTER><IFRAME name=mid_wav src="/webtmp/null.htm" width=480 scrolling=no height=400></IFRAME><BR> </CENTER> </TD> </TR></TBODY></TABLE> </CENTER></TD> </TBODY> </TABLE> </CENTER> <CENTER> <TABLE width=750 height=120 border=1> <TBODY> <TR> <TD><!-- <FONT size=4> --> <DL> <span class=time style="Color;maroon; font-size:16pt;" begin="3" dur="indefinite" timeaction="display"> <DT>操作時の勘所、キモについてコメント記入が可能です。</span> <span class=time style="Color;blue; font-size:16pt;" begin="6" dur="indefinite" timeaction="display"> <DD>再生中のビデオに応じて表示内容の説明を表示したい。</span> <span class=time style="Color;red; font-size:16pt;" begin="4" dur="indefinite" timeaction="display"> <DD>文字サイズはもっと大きい方がいい？</span> <span class=time style="Color;red; font-size:16pt;" begin="4" dur="indefinite" timeaction="display"> <BR>そしたら、考えとく。</span> </DL> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> ---FileName : myhp_02.htm--- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Ｓａｍｐｌｅ＜大＞</TITLE> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <META content="MSHTML 6.00.2800.1528" name=GENERATOR></HEAD> <BODY leftMargin=0 topMargin=0> <CENTER><EMBED src=/WEBTMP/MOV/test1.wmv width=480 height=400> <BR>test1.wmv(600KB)<BR></CENTER></BODY></HTML> ---FileName : null.htm--- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD> <BODY></BODY></HTML> この内容をＣドライブ作成したWEBTMPというフォルダへ放り込み、動作 確認をしています。