サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    ビデオにキャプションをプログラムで追加する

    このトピックでは、を使用してビデオにキャプションを追加する方法を学びます Brightcove Player.

    概要

    クローズドキャプションをビデオに追加して、アクセスしたい個人に補足的な情報を提供することができます。 ろう者と難聴者がビデオプレゼンテーションのオーディオ部分にアクセスできるように、キャプションが必要です。 ビデオのキャプションを Brightcove Player、次のタスクを完了する必要があります。

    キャプションファイルの作成

    キャプションをビデオに追加するには、まずキャプションファイルを作成する必要があります。 ザ Brightcove Player キャプションはWeb Video Text Tracks Format(WebVTT)である必要があります。 (Dynamic Deliveryアカウントにキャプションを取り込む場合、DFXPまたはSRTキャプションを追加できます。これらは自動的にWebVTTキャプションに変換されます。)WebVTTファイル形式はプレーンテキストであり、タイムテキストデータとそれに続くキャプションまたはサブタイトルが含まれます。テキスト。 WebVTTファイルの一部を以下に示します。

    WEBVTT
    
    00:00:00.000 --> 00:00:07.080 align:middle line:90%
    
    00:00:07.080 --> 00:00:10.280 align:middle line:84%
    Hi, I'm Bob Bailey, a Learning
    Specialist with Brightcove.
    
    00:00:10.280 --> 00:00:12.780 align:middle line:84%
    In this video, you'll learn
    about how Video Cloud Studio is
    
    00:00:12.780 --> 00:00:14.940 align:middle line:84%
    organized and get a
    brief overview of what
    
    00:00:14.940 --> 00:00:17.490 align:middle line:90%
    you can accomplish using it.

    WebVTT形式の詳細については、次を参照してください。 このリンク。 サポートが必要な言語ごとに別々のキャプションファイルが必要です。 キャプションファイルの作成に役立つサードパーティ製のツールは多数ありますが、 Brightcove キャプションと翻訳サービスを提供する複数のパートナーを抱えています。 完全なリストについては Brightcove パートナー様、 パートナー 当社のウェブサイトのセクション。

    ダイナミック配信動画を使用している場合は、SRTまたはDFXPのキャプションを取り込むこともできます。 Brightcove それらを自動的にWebVTTに変換します。 を参照してください WebVTTファイルの取り込み(テキストトラック/キャプション) 詳細はドキュメント。

    動画に字幕を追加する

    In Video CloudWebVTTキャプションをビデオに追加するには、ホストするリモートアセットとして、またはそれを Video Cloud。 それをしたら、 Brightcove Player ビデオが読み込まれると自動的にキャプションが追加され、 CC ボタンの player コントロール。 ビデオにキャプションを追加する方法の詳細については、 概要:ビデオにキャプションを追加する.

    <track>タグを含む

    WebVTTキャプションファイルを関連付けるには Brightcove Player、ページはめ込みの埋め込みコードを変更して、 <track> タグを付けてください。 例えば:

    <track kind="captions" src="<location of caption file>" srclang="en" label="English">

    <track> タグは、メディアが再生されているときに表示される字幕、キャプションファイル、またはテキストを含むその他のファイルを指定するために使用されます。 これを行う手順は以下のとおりです。

    1. 生成する 高度な (ページはめ込み)の埋め込みコード player. これは、 メディアモジュール.
      コードは次のようになります。
      <video-js 
      	id="myPlayerID" 
          data-video-id="4230322585001" 
          data-account="20318290001" 
          data-player="default" 
          data-embed="default" 
          data-application-id 
          class="video-js" controls 
          width="640" height="360">
      </video-js>
      <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
      <video-js 
      	id="myPlayerID" 
          data-account="20318290001" 
          data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
          data-embed="default" 
          data-application-id 
          class="video-js" controls 
          width="640" height="360">
      </video-js>
      <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
    2. 追加 <track> 内部のタグ <video-js> タグで、すべてのキャプションファイルの場所を示します。 Player Studio は現在、パブリッシャーがWebVTTキャプションファイルをアップロードする方法を提供していません。 キャプションファイルの場所のURLは、250文字未満でなければなりません。

      以下の例では、英語、日本語、フランス語のキャプションファイルが指定されています。 言語コードの完全なリストについては、 HTML言語コードリファレンス.
      <video-js 
      	id="myPlayerID" 
          data-video-id="4230322585001" 
          data-account="20318290001" 
          data-player="default" 
          data-embed="default" 
          data-application-id 
          class="video-js" controls 
          width="640" height="360">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
      </video-js>
      <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
      <video-js id="myPlayerID" 
      	data-account="20318290001" 
          data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
          data-embed="default" 
          data-application-id 
          class="video-js" controls 
          width="640" height="360">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
        <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
      </video-js>
      <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
      
    3. (オプション) 動画の再生開始時に字幕を自動的に表示するには、ページをいくつか変更する必要があります。 あなたは default 属性を <track> タグを使用して、少量のコードを表示および設定して追加します。 なお、 default 属性は1つにしか表示されません <track> タグ。 たとえば、ビデオの再生開始時に英語のキャプションを表示するには、 <track> タグは次のように変更されます。
      <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English" default>
      <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
      <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">

      指定されたキャプションを自動的に開始するために必要なコードは次のとおりです。

      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function () {
          var myPlayer = this;
          myPlayer.on("loadedmetadata", function () {
            //If you want to start English as the caption automatically
            myPlayer.textTracks()[1].mode = "showing";
          });
        });
      </script>
    4. でページを公開する player。 時 player 関連するキャプションが発行され、 CC ボタンが表示されます player クロム。
      ツールバーのCCボタン
    5. ストリーミングを停止する場合は上部の CC ボタンを押してキャプション言語を選択し、キャプションを表示します。
      キャプションメニュー

    字幕のスタイル設定

    このセクションでは、キャプションをプログラムでスタイル設定する方法について説明します。 WebVTTファイルを変更してキャプションのスタイルを設定する方法、および player、を参照してください。 キャプションのスタイル設定 の資料をご参照ください。

    プログラム的なスタイルのキャプションには、2つの方法があります。

    • player.textTrackSettings.setValues():のキャプションにスタイルを動的に設定します player
    • player.textTrackSettings.saveSettings():ブラウザの設定を保存します ローカルストレージ

    setValues(objectOfStyles)

    キャプション用に変更できるスタイルのセットは限られています。これについては以下で詳しく説明します。 これらのスタイルの使用例は次のコードに示されており、スクリーンショットに示すようにキャプションを表示します。

    videojs.getPlayer('myPlayerID').ready(function () {
        var myPlayer = this;
        myPlayer.  textTrackSettings.setValues({
          backgroundColor: "#FF0",
          color: "#00F",
          fontFamily: "monospaceSansSerif",
          fontPercent: 1.5,
          windowColor: "#0FF",
          windowOpacity: "0.5"
        }) ;
    });
    スタイル付きキャプション

    以下の表に、変更可能なキャプションスタイルとそれらのスタイルの有効な値を示します。

    キーズ 有効な値
    backgroundColor 以下に定義されている有効な色
    backgroundOpacity 1 (不透明)
    .5 (半透明)
    color 以下に定義されている有効な色
    edgeStyle none
    raised
    depressed
    uniform
    dropshadow
    fontFamily proportionalSansSerif
    monospaceSansSerif
    proportionalSerif
    monospaceSerif
    casual
    script
    small-caps
    fontPercent
    (オブジェクト内の引用符で囲まない)
    0.50
    0.75
    1.00
    1.25
    1.50
    1.75
    2.00
    3.00
    4.00
    textOpacity 1 (不透明)
    .5 (半透明)
    windowColor 以下に定義されている有効な色
    windowOpacity 1 (不透明)
    .5 (半透明)
    0 (トランスペアレント)

    色を使用する上記の値の場合、有効な色の値は次のとおりです。

    有効な色
    #000 (ブラック)
    #00F (青)
    #0FF (シアン)
    #0F0 (グリーン)
    #F0F (マゼンタ)
    #F00 (赤)
    #FFF (白)
    #FF0 (イエロー)

    設定を保存する()

    キャプションをスタイリングするときに役立つ可能性があるもう1つの方法は player.textTrackSettings.saveSettings()。 このメソッドはブラウザに保存します ローカルストレージ 字幕スタイルの現在の設定。 次のChromeのスクリーンショット 応用 タブには、 player キーの名前、 vjs-text-track-settings、およびその関連値

    ローカルストレージを表示

    このメソッドは、を使用してキャプションスタイルを構成する可能性を与えます playerのUI、次に設定を保存し、使用する値をコピーします player.textTrackSettings.setValues()上記のように、

    コードを使用して実装する

    プログラムでキャプションのテキストトラックを追加することは可能です。 この機能の主要な方法は次のとおりです。 addRemoteTextTrack()その構文は次のとおりです。

    playerObject.addRemoteTextTrack({
      kind: string,
      language: string,
      label: string,
      src: string
    });

    ここで、

    • kind - この使用のためのテキストトラックのタイプ 'キャプション'
    • language - 2文字の言語コード、たとえば 'en'
    • label - キャプションのUIに表示される言語のラベルなど '英語'
    • src - WebVTT形式のキャプションファイルへのURL

    関数呼び出しは型のオブジェクトを返します vjs.TextTrack.

    使用例:

    var frTrack = myPlayer.addRemoteTextTrack({
      kind: 'captions',
      language: 'fr',
      label: 'French',
      src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
    });

    あなたは loadedmetadata イベントを使用する前にディスパッチするイベント addRemoteTextTrack() 方法。 次の例は、英語とフランス語のキャプションをビデオに追加するためのスクリプトブロックを示しています。

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function () {
        var myPlayer = this;
        myPlayer.one("loadedmetadata", function () {
          var enTrack = myPlayer.addRemoteTextTrack({
            kind: 'captions',
            language: 'en',
            label: 'English',
            src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos.vtt'
          });
          var frTrack = myPlayer.addRemoteTextTrack({
            kind: 'captions',
            language: 'fr',
            label: 'French',
            src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
          });
        });
      });
    </script>

    相補的な方法 textTracks() に割り当てられたすべてのテキストトラックを取得できます player。 メソッドはタイプのオブジェクトを返します vjs.TextTrackList.

    Live キャプション付きストリーミング

    ドキュメントキャプションのこの時点までは、別々のファイルとして配信され、<track>要素を介してビデオに関連付けられています。 この種のキャプションは、 アウト・オブ・バンド。 代わりの方法は、キャプションデータをビデオコンテンツに直接埋め込むこと、頻繁にライブビデオストリームを埋め込むことを含み、時には インバンド キャプション。

    Brightcove Live 現在、バンド内の608キャプション(h.264ヘッダー内)をサポートしています。 キャプションがh.264入力信号(user_dataパケットに正しくシグナリングされている)の中にある場合、それらはh.264出力に渡されます。

    ブロードキャストElementalライブエンコーダを使用している場合、SDI(EIA-608 / CEA-608)または他のソース(SCTE-20、SCC、テレテキスト、DVB-Sub、補助、ARIB、TTML、SCTE-27、 STL、SRT、SMI)に送信し、あなたが私たちに送るh.264ストリームに入れてください。 他の放送グレードのエンコーダでも同じことが可能ですが、正式にテストしていません。

    WebVTTのキャプションは Studio上ではサポートされていません。 サポートされている Live ストリーム。

    Brightcove Player インバンドキャプションをサポートしているため、 Live キャプション付きで、HLSに組み込まれているため、プラグインは必要ありません。 Brightcove PlayerネイティブHLSが使用されていないあらゆるところで実装されます。 ネイティブHLSが使用されている場合、インバンドキャプションのサポートはOSとブラウザに依存します。 たとえば、iOSのネイティブHLSは、インバンドキャプションを完全にサポートしています。

    制限事項

    キャプションは、以下のデバイスタイプとオペレーティングシステムでサポートされています。

    • iOS 9 +
    • アンドロイド4 +
    • Internet Explorer 8 +
    • デスクトップ上の最新のChrome、Safari、Firefoxブラウザ

    ページの最終更新日:28年2020月XNUMX日