キーポイントの概要

概要

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

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

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

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

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

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

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

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

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

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

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で動作します。メディアソースは同期しますが、ユーザーはブラウザ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がHTML5ビデオのアクセス可能なオーディオ説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。