HTML5ビデオのアクセス可能なオーディオ説明

キーポイントの概要

概要

• 従来の視覚障害のあるオーディオの説明では、プロのビデオ編集機器をエンコードして、ビデオファイルの別のオーディオトラックに埋め込む必要があります。このプロセスは、ほとんどのコンテンツクリエーターにとって非現実的です。
• html5ビデオ仕様はaudioTracksオブジェクトを提供します。これは、オーディオの説明にスイッチボタンを実装し、オーディオとビデオのボリュームを個別に制御できるようにします。ただし、ブラウザは現在、この機能のサポートが限られています。
• 別のソリューションは、複数のソースの同期を可能にするHTML5オーディオとビデオの機能であるMediaControllerを使用することです。この機能は現在、ブラウザのサポートで制限されていますが、既存の広く実装された機能を使用して、2つのメディアファイルを同時に同期して開始および保持できます。
• ビデオAPIには、Audioの再生をビデオイベントと同期させるために、再生、一時停止、終了、TimeUpdateなどのイベントを提供します。 「TimeUpDate」イベントは、この目的にとって特に重要であり、平均3〜5回毎秒トリガーされます。このアプローチにより、専用のソフトウェアや別のバージョンのビデオを必要とせずに、アクセス可能なオーディオ説明を作成できます。

最近のクライアントは、アクセス可能なビデオプレーヤーを作成するように頼みました。彼女は、機能の1つをオーディオの説明であることを本当に望んでいました。オーディオの説明は、視覚障害者または視覚障害のある人を対象としており、重要な視覚的詳細を説明するための追加の音声情報を提供します。従来、オーディオの説明を含むビデオを特別に作成する必要があり、オーディオは単一のビデオファイルの別のトラックにエンコードされています。これには、これらのオーディオトラックをエンコードするために非常にプロフェッショナルなビデオ編集機器が必要であるため、ほとんどのコンテンツクリエーターが達成することが困難になります。これは、オーディオの説明でオンラインで見られるものです。たとえば、BBC Iplayerはそのようなコンテンツを提供しますが、ビデオプレーヤーは相対ボリュームを制御できず、オーディオの説明をオフにすることはできません。 html5デビュー

html5ビデオ仕様はaudioTracksオブジェクトを提供するため、スイッチボタンを実装し、オーディオとビデオのボリュームを個別に実装できます。しかし、そのブラウザのサポートはほとんど存在しません。執筆時点では、IE10のみがこの機能をサポートしています。とにかく、私のクライアントが望むのは、別のバージョンを作成せずにビデオに追加できる別のファイルのオーディオ説明です。もちろん、かなりの数のブラウザで実行する必要があります。したがって、私の次のアイデアは、複数のソースを同期できるHTML5オーディオとビデオの機能であるMediaControllerを使用することです。ただし、ブラウザのサポートも同様にスリムです。執筆時点では、Chromeのみがこの機能をサポートしています。しかし、ご存知のように、このサポートがなくても、2つのメディアファイルを同時に開始することは明らかに問題ではありません。同期しておく必要があります。それでは、既存の広く実装された機能を使用してこれを実現できますか？ビデオイベント

ビデオAPIは、フックできる多くのイベントを提供します。これにより、オーディオ再生をビデオイベントと同期させるはずです。

• 「プレイ」イベント（ビデオが再生されたときにトリガー）。
• 「一時停止」イベント（ビデオが一時停止されたときにトリガー）。
• 「終了」イベント（ビデオの最後にトリガー）。
• 「TimeUpDate」イベント（ビデオが再生されたときに継続的にトリガー）。

「TimeUpDate」イベントは非常に重要です。トリガーする頻度は指定されておらず、実際には大きく異なります - しかし、総合平均として、それは1秒あたり3〜5回に相当します。これは私たちの目的で十分です。 2つのビデオファイルを同期しようとする同様の方法を見てきましたが、小さな違いでさえ明らかであるため、これは特に成功していません。ただし、オーディオの説明は通常、正確に同期する必要はありません - いずれにしても、100ミリ秒の遅延は許容されます - オーディオファイルを再生すると、ブラウザの負担が少なくなります。したがって、既存のビデオイベントを使用してオーディオとビデオの再生を一緒にロックする必要があります。

ビデオが再生中にオーディオを再生します。

ビデオが一時停止したときにオーディオを一時停止します。
• ビデオの最後に、ビデオとオーディオを同時に一時停止します。
• 時間が更新された場合、オーディオ時間がビデオ時間と異なる場合、オーディオ時間はビデオ時間と一致するように設定されます。
いくつかの実験の後、以下に示すように、時間を数秒で比較することで最良の結果を得ることができることがわかりました：

これは直感に反するように思われますが、最初は正確なデータが必要だと思っていましたが、そうではないようです。ビデオトラックのテキストオーディオコピー（つまり、オーディオとビデオの両方が同じサウンドを生成する）でテストすることで、同期が良いか悪いかを聞くのは簡単です。これに基づいて、丸め数は丸めではないよりも良い同期結果を得ることがわかりました。したがって、これが最終的なスクリプトです。ブラウザが

をサポートしている場合は、使用するだけです。そうしないと、以下に説明する手動同期を実装します。

if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}

はスクリプトのみで定義されていることに注意してくださいが、コントローラーは静的な「mediagroup」属性を使用して定義できます：MediaController

var video = document.getElementById('video');
var audio = document.getElementById('audio');

if(typeof(window.MediaController) === 'function') {
  var controller = new MediaController();
  video.controller = controller;
  audio.controller = controller;
} else {
  controller = null;
}

video.volume = 0.8;
audio.volume = 1;

video.addEventListener('play', function() {
  if(!controller && audio.paused) {
    audio.play();
  }
}, false);

video.addEventListener('pause', function() {
  if(!controller && !audio.paused) {
    audio.pause();
  }
}, false);

video.addEventListener('ended', function() {
  if(controller) {
    controller.pause();
  } else {
    video.pause();
    audio.pause();
  }
}, false);

video.addEventListener('timeupdate', function() {
  if(!controller && audio.readyState >= 4) {
    if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
      audio.currentTime = video.currentTime;
    }
  }
}, false);

これを行うと、JavaScriptなしでChromeで動作します。メディアソースは同期しますが、ユーザーはブラウザ

がオーディオが何を表すかわからないため、オーディオを制御できません（オフにすることはできません）。この場合、音声をビデオにエンコードすることをお勧めします。なぜなら、ブラウザが認識してネイティブコントロールを提供できるMediaControllerオブジェクトに表示できるからです。しかし、

データを持っていないため、これは無関係な質問です！したがって、スクリプトが利用できない場合、オーディオはまったく再生されません。これは最終的なデモであり、Opera、Firefox、Chrome、Safari、またはIE9以降の最新バージョンで実行できます。

もちろん、これは単なる概念実証の単なる実証です。初期の機能検出はなく、ネイティブの「コントロール」プロパティによって提供される基本的なコントロールのみがあります。正しい実装には、（とりわけ）オーディオを切り替えるボタンと個別のボリュームスライダーを提供するためのカスタムコントロールが必要です。インターフェイスにはキーボードからもアクセスできるはずですが、一部のブラウザのネイティブコントロールではそうではありません。また、バッファリングを正しく処理する必要があります。実際、ビデオがプリロードされたポイントを検索すると、ビデオが再同期するのに十分なロードがロードされるまで自由に再生され続けます。また、説明自体がほとんど専門的な基準を満たしていないことにも言及したいと思います！それはあなたが私を聞いて、Audacityを使用して記録し、変換できる場所です。しかし、それだけです、私はそれがこのアプローチの技術的障壁がどれほど低いかを効果的に示していると思います。ビデオを編集する必要はなく、フリーソフトウェアで1時間でオーディオを作成しました。概念の証明として、それは非常に成功していると思います。クライアントは非常に満足すると思います！ HTML5ビデオのアクセス可能なオーディオ説明のFAQ（FAQ）

HTML5ビデオでオーディオの説明にアクセスすることの重要性は何ですか？

アクセス可能なオーディオの説明は、HTML5ビデオをより包括的かつ使いやすくする上で重要な役割を果たします。彼らは視覚情報の聴覚相当剤を提供します。これは、視覚障害のあるユーザーにとって特に有益です。これらの説明は、メイントラックでは理解できない重要な視覚的詳細を説明しています。アクセス可能なオーディオの説明を追加することにより、コンテンツ作成者は、より多くの視聴者が自分の動画にアクセスできるようにし、それによってデジタルインクルージョンを促進することができます。

HTML5ビデオにオーディオの説明を追加する方法は？

HTML5ビデオにオーディオ説明を追加するには、いくつかのステップが含まれています。まず、ビデオの視覚要素を説明する別のオーディオトラックを作成する必要があります。これは、さまざまなオーディオ編集ソフトウェアを使用して実行できます。オーディオ説明トラックの準備ができたら、「説明」に設定された種類の属性を使用して、要素を使用してHTML5ビデオに追加できます。これにより、オーディオ説明トラックが認識され、ビデオで再生されます。

なぜ私のHTML5ビデオが再生できないのですか？

HTML5ビデオが再生できない理由がいくつかあるかもしれません。これは、正しくエンコードしないなど、ビデオファイル自体の問題が原因である可能性があります。これは、Webブラウザーまたはビデオプレーヤーがビデオ形式をサポートしていないという問題によるものでもあります。トラブルシューティングするには、さまざまなブラウザまたはさまざまなデバイスでビデオを再生してみてください。問題が続く場合は、ビデオファイルを確認し、そのフォーマットがHTML5によってサポートされていることを確認する必要がある場合があります。

HTML5ビデオでサポートされている一般的に使用される形式は何ですか？

HTML5ビデオは、MP4、WebM、OGGなど、いくつかの一般的なビデオ形式をサポートしています。 MP4形式は、すべての主要なブラウザとデバイスで広くサポートされているため、オンラインビデオに人気のある選択肢となっています。 WebMとOGGはオープンソース形式であり、広くサポートされていますが、すべてのブラウザでは適切に機能しない場合があります。

「HTML5ビデオファイルが見つからない」エラーを修正する方法は？

"HTML5ビデオファイルが見つかりません"エラーは通常、ブラウザが<video></video>要素のソース属性で指定されたビデオファイルを見つけることができないときに発生します。このエラーを修正するには、ソースプロパティのファイルパスが正しいこと、およびビデオファイルが指定されたパスにあることを確認してください。ファイルパスが正しい場合は、ビデオファイルがHTML5にあるか、ブラウザがサポートする形式を確認してください。

私のHTML5ビデオを応答する方法は？

HTML5ビデオの応答性を高めるには、CSSを使用してビデオの幅を100％に、高さを自動に設定できます。これにより、ビデオがコンテナの幅に合うように上下にスケーリングされ、さまざまな画面サイズに応答できるようになります。

html5ビデオに字幕またはナレーションを追加できますか？

はい、「キャプション」または「字幕」に設定された種類の属性を持つ要素を使用して、HTML5ビデオに字幕またはナレーションを追加できます。字幕またはナレーションを備えたWebVTTファイルを作成し、このファイルを要素のSRC属性に参照する必要があります。

HTML5ビデオの再生を制御する方法は？

HTML5は、再生、一時停止、ボリューム、フルスクリーンなど、組み込みのビデオ再生コントロールをいくつか提供します。これらのコントロールは、コントロール属性を<video></video>要素に追加することで有効にできます。さらに、JavaScriptを使用して、カスタムコントロールとインタラクションを作成できます。

WebサイトにHTML5ビデオを埋め込むことはできますか？

はい、<video></video>要素を使用して、WebサイトにHTML5ビデオを埋め込むことができます。 SRC属性を使用してビデオファイルのソースを指定する必要があります。また、コントロール、オートプレイ、ループなどのオプションの属性を追加してビデオ再生をカスタマイズすることもできます。

ビデオ再生にHTML5を使用することの利点は何ですか？

HTML5は、ビデオ再生に多くの利点を提供します。複数のビデオ形式をサポートし、組み込みのビデオ再生コントロールを提供し、字幕やオーディオの説明などのアクセシビリティ機能を追加できるようにします。さらに、HTML5ビデオは応答性が高く、すべてのデバイスと画面サイズで見栄えがよくなります。最後に、HTML5はWeb標準であるため、追加のプラグインやソフトウェアのないすべての最新のWebブラウザーによってサポートされています。

以上がHTML5ビデオのアクセス可能なオーディオ説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。