• ベストアンサー

動画の上に文字を乗せたい(HTMLレイヤータグ

フラッシュ動画を作成しました。(○○○○○○.swf) objectタグ(または embedタグ)でブラウザ上に再生させました。 この動画の上に、テキスト文字を乗せたいと思います(divレイヤータグ) マックfサファリでは動画と文字がレイヤー状態でうまく表示されましたが ウインドウズ関係のエクスプローラでは動画も文字も表示されません。ファイヤーフォックスでは動画のみが表示されました。 何かほかにウインドウズ関係ブラウザ用のレイヤータグあるのでしょうか。 そのレイヤータグの設置方法をご存知の方はご回答をよろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

レイヤータグがなにを意味するかわかりませんが、HTMLのタグは、HTML文書全体の中で、それがどのような構成要素であるかを示すため以外のものではありません。たとえば見出しなら<h1>見出し</h1>ですし、ひとつの段落を<p></p>というタグで括ります。決してデザインのためではありません。  そのうえでスタイルシートで、この要素の上に、この要素を重ねるとかを指定していきます。  たとえば、画像の説明のリストがあったとします。リストですから <ul class="imageList">  <li><img・・・>   <ol>    <li class="explanation">説明</li>    <li class="date">撮影日時</li>   </ol>  </li>  <li><img・・・>   <ol>    <li class="explanation">説明</li>    <li class="date">撮影日時</li>   </ol>  </li> とかになっているはずです。  それをスタイルシートで、 ul.imageList,ul.imageList>li{dsplay:block;list-style:none;margin:0;padding:0;position:relative;} ul.imageList>li>ol{position:absolute;top:20px;left:20px;} という風に、重ねて表現したり、画像の右側に並べたり・・・・スタイルシートで自在に表現します。  示された質問の動画やテキストがどのような文書構成要素かわからないので、具体的方法は示せませんが、動画とテキストを含む要素全体のposition指定をstatic意外にして、その内部でテキストをposition:absolute;で絶対配置することになるでしょう。

Digi-lady
質問者

お礼

早速ご回答頂きありがとうございました。CSSの概念をよく理解していませんでした。 ご回答内容をもとにいろいろ調べてテストした結果、おかげさまでできました。ありがとうございました。

関連するQ&A

  • HTML文書上での動画再生

    Windows10でコンピューターをサーバーとして使い、<embed>タグの入ったHTML文書で動画を再生しようとしています。 動画ファイルの形式はaviです。ブラウザーはインターネットエクスプローラーで、バージョンは特定できませんがWindows10にアップデートしたときについてきたものです。 動画ファイルの名前が英数字だけだと再生できるのですが、日本語文字が入ると真っ暗な画面だけしか出てきません。 文字コードの問題だろうと思って、ブラウザー右上の歯車マークを押して関係するコマンドを探してみましたが、それらしいものは見つかりませんでした。 以前のエクスプローラーなら文字コードを選べたのですが、今のものはできないのでしょうか? それともなにか方法があるのでしょうか? 詳しい方、どうか教えてください。よろしくお願いします。

  • embedタグでFirefox右クリック禁止

    ホームページで動画配信しています。 objectタグだけでは読み込めないブラウザがあるためembedタグを挟み込んでどのブラウザでも読み込めるようにしてます。 firefoxはobjectタグは無視していて、embedタグで表示されますが、動画上で右クリックをするとパスが表示されてしまいます。 これを表示させない方法はないでしょうか? firefox対応の右クリック禁止javascriptを使用したところ、ページでは大丈夫でしたが動画上では無効でした。 http://okwave.jp/kotaeru.php3?q=1375996のページのように 画像を載せるやり方をやってみましたがfirefoxでは意味がありませんでした。

    • ベストアンサー
    • HTML
  • WMVのHTMLへの埋め込み方について

    WMVのHTMLへの埋め込み方について WMVの動画をHTMLに埋め込み、表示させたいと思っています。 IEは、正しく表示されるのですが、Firefoxで表示すると動画のサイズが そのままのサイズで表示されてしまいます。 (embedタグ中のwidthとheightの値を変えることでプレーヤーのサイズは変更できるのですが、 動画自体のサイズが変更できません。) 動画自体に問題があるのでしょうか? それともタグの記述方法に問題があるのでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLに動画を埋め込もうとしています。

    HTMLに動画を埋め込もうとしています。 今までならFLVをFLASHにて再生するタグを埋め込んでおしまいだったのですが、ここにきてApple製品がFLASHに対応していないため、どうすればよいか悩んでおります。 現在思いついたのが、 ・HTML5で再生できるブラウザはHTML5で、それ以外はFLVで再生するようにJSで制御 ・時代を逆行するかもしれませんが全て<embed>にて埋め込んでしまう 現時点でどの方式が手間なく簡単でしょうか。

    • ベストアンサー
    • HTML
  • HTMLからFlashで作成したswfファイルを起動して変数を渡す方法

    HTMLからFlashで作成したswfファイルを起動して変数を渡す方法についてです。 その際、フレームで定義した領域にswfを読み込みたいのですが、その場合、どのようにすれば変数をswfに渡すことができるでしょうか? FlashVars属性をobjectタグやembedタグに追加するようにマニュアルには記載がありますが、フレーム内にswfを読み込む場合の変数の渡し方がわかりません。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • downloadhelperの動画

    downloadhelperでニコニコ動画の動画をダウンロードしました。それはswfという拡張子で保存されました。shockwave Flash objectというファイルだそうです。 それをクリックし,firefoxで起動すると,“有効なWin32アプリケーションではありません”と表示され,起動できません。 一方,それをクリックし,IEで起動すれば起動できます。 また,firefoxで“ファイルを開く”からそのファイルを起動すると,動画を見ることができます。 どうすれば,クリックしたとき,firefoxで起動できるようになりますでしょうか?

  • HTMLの上に重ねてFlashを表示させたいのですが

    以下のようなものを作成したいのですが、上手くいきませんので、アドバイスを頂けないでしょうか? 1.HTMLに重ねてFlashのオープニングのようなものを表示させ、再生が終わったらFlashが消えて、下のhtmlが見える。 2.再生は一日に一度だけで、同日に開いた場合、重ねたFlashは再生せず、htmlが表示される。 divタグでレイヤーにしてFlashをabsoluteで配置(bodyタグの下に書き込み)してみたのですが、どうしても、他のdivより下に配置されてしまい、背景のようになってしまいます。 CSSは3カラムです。 出来れば、画面の中央にくるようにしたいのです。 また、「2」に関しては、同日に開いたとき、指定したキーフレームに飛ばして再生出来ることはわかったのですが、Flashそのものを消してしまうことは、いろいろ探しましたが分かりませんでした。 すでに、いろいろ自分なりに検索したのですが、このようなことが出来るかも分からないので、皆様のお力をお貸しください。

    • ベストアンサー
    • Flash
  • Flash動画保存

    外部JSscriptでHTML上にembedタグを記述する形で埋め込まれていてFlashMania・FlashGet・FlashPlayerEx等でURLを抽出できないswf動画を保存する方法をご教示ください。

  • ココログにFlashの動画を貼り付けて見ることはできるでしょうか?

    ココログにsuzukaで作成したFLASH動画を貼り付けて見れるようにしたいのですが、上手くいきません。 「ファイルをアップロード」でswfファイルをUPすることはできますが「○○.swfのダウンロード」という表示になり、ファイルのダウンロードはできますが動画を見ることはできません。 こちらの過去ログから suzukaでSWF が作成されるとともに,SWFと同じフォルダに その SWF が貼り付いた HTML も同時に生成されるように保存し タグを貼り付けてやってみましたが、 FLASHがある気配(?)はありますが、その部分は真っ白で表示されませんでした。 質問は ・ココログにFLASHの動画を表示させることができるのでしょうか? ・できるとすれば、HTMLタグはどのようにしたらいいのでしょうか? 以上です。 ちなみに私が貼り付けてみたタグは <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="400" HEIGHT="300" id="ファイル名" ALIGN=""> <PARAM NAME="allowScriptAccess" VALUE="sameDomain"> <PARAM NAME="movie" VALUE="5.swf"> <PARAM NAME="loop" VALUE="false"> <PARAM NAME="menu" VALUE="false"> <PARAM NAME="quality" VALUE="high"> <EMBED src="ココログのアドレス/ファイル名.swf" loop="false" menu="false" quality="high" WIDTH="400" HEIGHT="300" NAME="ファイル名" align="" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> ↑このタグの私が直した部分がおかしいために表示されないのかもしれないです・・・(汗) どうか、ご指導よろしくお願いいたします。

  • HTMLのレイヤーとは?

     別の質問で、レイヤーを重ねてみてはどうか、という回答を頂いたことがあります。レイヤーとは何ですか?  あるサイトで、画像の上に画像(周りを透過させたgifアニメ)を見ました。大変綺麗でした。また、その上に重ねられたgif画像は枠線を表示したテーブルの、その枠線の上まではみ出ていました。  どうやっているのだろうと思いソースを見たら <IMG SRC="上のgifアニメ" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></div> <IMG SRC="下の画像" ALIGN="BOTTOM" NATURALSIZEFLAG="2">  とありました。CSSには #layer { position: absolute;  の次にtop,left,width,heightvisibilityの設定がしてありました。  同じように画像を重ねる方法をタグ辞典で探したら、positionとz-indexで指定するよう書いてあり、指定する項目もよく似ていますがlayerの文字はありません。  layerとはどのようなタグでしょうか?

    • ベストアンサー
    • CSS

専門家に質問してみよう