• 締切済み

動画にキャプションをつける方法

ループ動画にhtml5でキャプションをつけたいと考えています。 動画は背景にフルスクリーンで表示します。 動画自体にキャプションをつけた場合、ブラウザサイズによって文字が劣化したりするので、テキストとして表示させたいです。 JSのCuepointは現在サイトがないみたいで使用することができませんでした。 WEBVTTはフォントの背景に黒いベタがひかれているので除外です。 jQueryで動画にキャプションをつけられるものはありますか。 ご回答お願い致します。

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

WEBVTTで十分です。 背景色などはCSSで調整できます。 <style> ::cue { background-color: transparent; } </style>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

youtubeで字幕機能使うとかは選択肢にありませんか?

rossi46mail
質問者

お礼

回答ありがとうございます。 youtube見落としていました! youtube動画を背景にフルスクリーンで表示させて字幕機能をつける方法でやってみたいと思います! ありがとうございました!

関連するQ&A

  • フォームのキャプションのフォント

    1、VB6のウーザーフォームでInputBOXのようなものを作り、このフォームのキャプションの所にタイトルを表示しています。この、フォントが変えられるないものでしょうか。 2、また、このフォームを呼び出して、テキストボックスに入力してから呼び出しもとに戻り、そのテキストボックスのテキストを読み出してみると、呼び出し前の値しか読み出せません。 いずれも別の方法で対処していますが、上記の方法で出来ないものでしょうか。宜しくお願いします。

  • ムービーメーカーでキャプションの表示時間

    Window Live ムービーメーカー(バージョン2011)で、動画にキャプションを入れているのですが、テキストの表示時間を、次のキャプションを入れるタイミングで自動調整することは出来ませんでしょうか? 初期設定か分かりませんが、ふつうにキャプションを入れると、表示時間は「357.60秒」になっていて、次のキャプションを入れるには、その直前までの秒数に修正しないといけません。しかし、ここで、その直前まで表示されていた秒数を測って修正するのは効率が悪いので、次のキャプションを入れる段階で自動的にその直前までで前のキャプションが消えてくれると助かるのですが、そのような設定はないでしょうか。 よろしくお願いします。

  • 画像の下部にキャプションを入れる

    現在スマホサイトを作成しています。 そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 http://subculsheets.blog.fc2.com/blog-entry-19.html 上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。 キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。 下記が現在のコードです。 HTML----------------------------------------------------------- <div class="photo-center2"> <img src="../img/○○.jpg"> <div class="caption-txt2">キャプションテキスト</div> </div> --------------------------------------------------------------- CSS----------------------------------------------------------- .photo-center2 img{ width:100%; max-width:380px; } .photo-center2{ position: relative; border:1px solid rgb(204, 204, 204); padding: 5px; background-color:#ffffff; margin:0 auto; margin-bottom: 15px; width:90%; max-width:380px; } .caption-txt2{ position: absolute; color: #fff; padding: 5px; font-size: 12px; bottom: 9px; background-image: url("../images/caption.png"); text-align:center; width:95%; max-width:382px; } ------------------------------------------------------ どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか? ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • コマンドボタンを押すごとにキャプションの文字が小さ

    コマンドボタンを押すごとに、キャプションの文字が小さくなってしまうのですが、 これはエクセルのバグですか? フォントサイズは28にしてるのに、こんなに小さくなってしまいました。 シートの表示は100%です。 エクセルを再起動してもやはり押すごとに小さくなります。 エクセルのバージョンは2010です。

  • 16:9サイズでの動画エンコードについて

    フリーソフトで16:9サイズに動画をエンコードしているのですがエンコードした動画をフルスクリーン表示にすると画面より2回りくらい小さくなってしまいます。 ワイド画面で4:3サイズをフルスクリーン表示すると左右が黒淵になると思いますが、そのサイズでさらに16:9にしているようで上下左右に黒淵がついたサイズになってしまいます。 フルスクリーン時に画面いっぱいに動画を表示できるようなエンコードが簡単にできるソフトはないでしょうか?できればフリーソフトがいいです。

  • Lightbox2でのキャプションについて

    画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、(当然ですが)サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか? ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想(こんな感じに出来たらいいなぁというイメージです) <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。(JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません) 他に何か良い方法はありますでしょうか?

  • 動画の画質を拡大しても落とさない方法ってありますか?

    詳しく言いますと、例えば300×200の画面サイズの動画はこの大きさのまま視聴すれば綺麗に見れるのですが、大きい画面(動画プレイヤーなどのフルスクリーン機能)などを使って全画面表示したときに、元のサイズで見ていた時よりも当たり前ですが画質が汚く見えます。 そこで、エンコードやなんらかのソフトを使ってこのような症状を抑える方法があれば教えてほしいです。 よろしくお願いします。

  • jqueryのプラグインについて

    現在、webサイトにjquery.lazyload.jsを導入しようとしていますが、 firefoxでブラウザサイズが小さいと、左右にガタガタ動いて、ブラウザが 止まってしまいます。 どなたかjquery.lazyload.jsについて解決方法を教えてください。 宜しくお願いいたします。 参考url http://www.skuare.net/test/jLazyLoad.html

  • フォントサイズを変更するボタンについて

    JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。 下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか? 優先順位はCSSより低いのでしょうか? <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul+ul a").textresizer({ target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか?

  • 見る人の環境によってフォントを変える方法‥

    先日とあるブログ形式のサイトを見ていると、ページ読み込みの途中で、フォントがポン、と変わることに気がつきました。 よく見ると、ボタン画像と思っていた部分が実はボタン背景の上にテキストが乗っていて、 そのテキストのフォントがいい感じに変わるのでボタン画像に見えた、というものでした。 そのフォントが搭載されていないPCでは、無難なフォントで表示されるようでした。 これを自分のブログでも出来ないかと思い、調べたのですが、そのような方法は見つかりませんでした。 このやり方、お分かりになる方、どうかご教授頂けませんでしょうか。 ここでそのサイトのURLを示したいのですが、先方に迷惑になるかも知れないのでやめておきます。 そのブログ形式のサイトは、MTで作られているようで、CSSやJSも見てみたのですが、 それらしき構文が見えませんでした。違う方法があるのでしょうか‥。

専門家に質問してみよう