html5ビデオで字幕またはキャプションを表示する方法は？
html5ビデオに字幕または説明を追加するには、
html5ビデオで字幕またはキャプションを表示するには、 <video></video>タグ内の<track></track>要素を使用する必要があります。この要素は、外部サブタイトルまたはキャプションファイルをビデオにリンクし、ビデオが再生されたときに表示されるブラウザをサポートします。
段階的にそれを行う方法は次のとおりです。
1。 <track></track>要素を使用します
<track></track>要素は、字幕、キャプション、説明などの時限テキストトラックを指定します。 <video></video>タグ内で動作し、いくつかの属性をサポートします。
-
kind：テキストトラックのタイプを定義します。使用：-
"subtitles"- 翻訳または転写用 -
"captions"- 聴覚障害の見解（サウンド情報を含む） -
"descriptions"- オーディオの説明 -
"chapters"- 章のタイトル -
"metadata"- スクリプト用
-
-
src：webvttファイルのURL（.vtt） -
srclang：トラックの言語（例："en"、"es"） -
label：プレーヤーメニューに表示されているユーザーフレンドリーな名前 -
default：デフォルトでトラックを有効にするオプションの属性
2。WebVTTファイルを準備します
字幕は、タイムキューを備えたプレーンテキスト形式であるWebVTT形式（Webビデオテキストトラック）でなければなりません。例（ subtitles_en.vtt ）：
webvtt 1 00：00：01.000-> 00：00：04.000 こんにちは、ビデオへようこそ。 2 00：00：05.000-> 00：00：08.000 これは字幕の例です。
.vtt拡張機能でこのファイルを保存し、サーバーでホストします。
3. html5ビデオに字幕を追加します
これは、英語のキャプションとスペイン語の字幕を備えた完全な例です。
<ビデオコントロールwidth = "640"> <source src = "myvideo.mp4" type = "video/mp4"> <！ - 英語のキャプション（聴覚障害者の場合） - > <Track Kind = "Captions" src = "captions_en.vtt" srclang = "en" label = "英語"デフォルト> <！ - スペイン語の字幕 - > <Track Kind = "subtitles" src = "subtitles_es.vtt" srclang = "es" label = "español"> ブラウザは、ビデオタグやテキストトラックをサポートしていません。 </video>
4.ユーザーが表示するもの
- ほとんどの最新のブラウザ（Chrome、Firefox、Edge、Safari）は
<track></track>をサポートしています。 - ビデオコントロールには、字幕/キャプションボタン（通常は⚫またはCC ）が表示されます。
- ユーザーはそれをクリックして、表示するトラック（英語、españolなど）を選択できます。
-
defaultを含めると、そのトラックがビデオの開始時に自動的に表示されます。
メモとヒント
- 常に
.vttファイルをテストしてください - 無効なタイムフォーマットまたはWEBVTTヘッダーの欠落により、それらがロードされないようにします。 - ホスティング事項：
.vttファイルには、正しいMIMEタイプ（text/vtt）を使用する必要があります。一部のサーバーは構成が必要になる場合があります。 - キャプションvs.字幕：非スピーチ情報（ [ドアクリーク]など）を含む場合は、
kind="captions"を使用してください。そうでなければ、subtitles問題ありません。 - さまざまな言語で複数のトラックを作成できます。アクセシビリティや国際的な視聴者に最適です。
基本的に、 .vttファイルを<track></track>にリンクするだけで、正しい属性を設定し、ブラウザは残りを処理します。すべてのプレーヤーが同じようにキャプションを表示するわけではありませんが、標準のHTML5プレーヤーはそれをうまくサポートしています。
以上がhtml5ビデオで字幕またはキャプションを表示する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
nfoファイルは字幕ですか？
Jan 30, 2023 am 10:49 AM
nfo ファイルは字幕ではなく、字幕ファイルは nfo 形式ではありません。一般的な字幕ファイル形式には、Srt 形式、Webvtt 形式、STL 形式、Sbv 形式、Ass 形式、Dfxp 形式、Ttml 形式などが含まれます。nfo はビデオ制作者の記録を記録します。制作プロセス フィルムの各種データ情報を記録したファイル。
Windows 11 でライブキャプションを即座にオンにする方法
Jun 27, 2023 am 08:33 AM
Windows 11 でライブ字幕を即座にオンにする方法 1. キーボードの Ctrl+L を押します。 2. [同意する] をクリックします。 3. 「英語 (米国) で字幕を追加する準備ができました」 (優先言語に応じて) というポップアップが表示されます。 4. さらに、歯車ボタンをクリックすると冒涜的な言葉をフィルタリングできますか?好み？悪口のフィルタリング 関連記事 Windows Server でアクティベーション エラー コード 0xc004f069 を修正する方法 Windows のアクティベーション プロセスが突然切り替わり、このエラー コード 0xc004f069 を含むエラー メッセージが表示されることがあります。ライセンス認証プロセスはオンラインですが、Windows Server を実行している一部の古いシステムではこの問題が発生する可能性があります。これらの予備チェックに合格し、合格しなかった場合は、
全国Kソングの字幕を調整する方法
Feb 23, 2024 pm 07:16 PM
カラオケの字幕を調整するにはどうすればよいですか?歌詞の字幕はNational Karaoke APPで調整できますが、多くのユーザーはカラオケの瞬間の字幕を調整する方法がわかりません. 問題に対する最新の解決策は以下に継続的に整理されます. 次に編集者が提供するNational Karaoke字幕の調整方法を図解で解説していますので、興味のある方は一緒に見てみてください！全国カラオケの使用に関するチュートリアル. 全国カラオケの字幕を調整する方法. 1. まずユニバーサル カラオケ APP を開き、メイン ページの [Voice Sing] セクションに切り替え、お気に入りの曲を選択して [K Song] をクリックします。 2. 次に、カラオケページに切り替えて、下部にある赤いボタン [歌い始める] をクリックします; 3. 次に、最新のページで、右上隅にある [3 つの点] 機能をクリックします; 4. 最後に、機能バーを展開します下部の[フォントサイズ]を選択して調整します
動画をカットして字幕や話し声を追加する方法
Mar 26, 2024 pm 05:14 PM
【ダビング】 1. クリッピングアプリを開き、アフレコを追加したい動画ファイルをインポートします。 2. ビデオ編集インターフェースの下部にある「オーディオ」ボタンをクリックし、「録音」オプションを選択します。 3. 下の赤い録画ボタンをクリックして、ダビングしたいコンテンツの録画を開始します。 4. 録音が完了したら、右上隅の「エクスポート」ボタンをクリックして保存します。 【字幕あり】 1. クリッピングアプリを開き、字幕を追加したい動画ファイルをインポートします。 2. ビデオ編集インターフェースの下部にある「テキスト」ボタンをクリックし、「新しいテキスト」オプションを選択します。 3. テキストボックスに追加したい字幕を入力し、設定します
パソコン版の動画編集で字幕を確認する方法 - パソコン版の動画編集で字幕を確認する方法
Mar 04, 2024 am 11:43 AM
オフィスでパソコン版を使っている人は多いですが、パソコン版の字幕を認識する方法をご存知ですか? 次に、編集者がパソコン版の字幕を識別する方法を紹介します。興味のある方は早速パソコン版を見てみましょう。パソコン版のクリップを開いてホームページに入ります。切り抜きの上にあるメニュー バーでテキストを選択します。 [スマート字幕] で [認識の開始] を選択するだけです。
ムービークリッピングに字幕と吹き替えを追加する方法 - 初心者向けのビデオ編集ビデオチュートリアル
Mar 18, 2024 pm 01:04 PM
字幕の追加: 1. ソフトウェアを起動し、[作成開始] をクリックします。 2. 下の[テキスト]をクリックします。 3. [新規テキスト]を選択します。 4. テキストを入力し、スタイルを調整して保存します。 5.追加が完了します。ダビングを追加する： 6. [オーディオ]を選択します。 7. ［録音］をクリックします。 8. 録音を開始します。スクリーンカット入門チュートリアル 1. ビデオセグメンテーション ビデオ編集を学びたいなら、ビデオセグメンテーションを学ばなければなりません. 短いビデオ制作のニーズがあるユーザーにとって、ビデオセグメンテーションを学ぶことで、非常に短時間でビデオを学ぶことができます.編集操作を終えたら、次に Windows 10 バージョンのシルエット (シャドウ) を使用して、ビデオを分割する方法を示します。動画の素材はTVシリーズの映像となっており、初めての方はこのタイプの動画からお使いいただけます。
Douyin自動字幕設定操作説明
Mar 26, 2024 pm 08:20 PM
1. 自動字幕を設定したい場合は、最初のステップとして、Douyin を通じてビデオを撮影するか、ローカルビデオファイルを携帯電話にインポートし、ビデオ編集ページに入り、右上のドロップダウン ボタンを見つけます。 (以下に示すように) コーナー。 2. ドロップダウン リストから新しい [自動字幕] 機能が表示され、クリックすると現在のビデオ内の音声を識別し、字幕を追加します。 3. さらに、字幕の色や形式などを自動で設定できるようになり、より多くのユーザーに利便性を提供できるようになりました。
PHPを使用して字幕付きのビデオファイルを再生するにはどうすればよいですか?
Aug 07, 2023 pm 12:13 PM
PHPを使用して字幕付きのビデオファイルを再生するにはどうすればよいですか?インターネット技術の発展に伴い、ビデオはオンライン コンテンツの最も人気のある形式の 1 つになりました。現在、多くのビデオ ファイルには字幕が付いているため、ユーザーはビデオ コンテンツを理解しやすくなっています。では、PHP を使用して、Web ページ上で字幕付きのビデオ ファイルを再生するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。まず、次の環境を準備する必要があります: PHP 実行環境 (Apache や Nginx など) を備えたサーバー、ビデオ ファイル (サポート
