<track> 要素と WebVTT によるクローズド キャプションをサポートする標準の HTML5 ビデオ プレーヤーを構築しようとしています。このプレーヤーの私の目標は、カスタム コントロール UI を構築する必要はなく、ブラウザー/デバイスによって提供される既定のコントロールに依存することです。
クローズド キャプションに関する FCC 規制に準拠するために、キャプションの書式設定オプション (色、サイズ、不透明度など) を含むメニューも作成しています。含めたいオプションの 1 つは、キャプションのオンとオフの切り替えです。デフォルトのコントロールに CC ボタンが存在しない Firefox のようなブラウザで特に役立ちます。
理解できないように見える1つの問題を除いて、すべてが正常に機能しています。カスタム トグルを使用してキャプションをオンまたはオフにすると、デフォルトのビデオ コントロールの CC ボタンもトグルします。ただし、これを逆に機能させることはできません。
ビデオ textTracks の表示/非表示/無効モードを確認し、それに応じてカスタム トグルを更新できるように、デフォルトの CC ボタンが押されたときにトリガーされる何らかのイベントを探しています。そのようなイベントは存在しますか？デフォルトのコントロールから CC ボタンだけを削除し、残りは残したままにする方法はありますか? この 1 つの問題のためだけに、プレーヤー用に完全にカスタムの UI を構築する必要はありません。
編集 1: 例として jsFiddle を次に示します。
<div class="htmlVid">
<video width="640" height="360" controls="controls" id="vid">
<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></source>
</video>
</div>
<label>Captions:</label>
<input onclick="capToggle('off');" type="radio" name="captions" checked="checked" />Off
<input onclick="capToggle('on');" type="radio" name="captions" />On
<script>
var vid = document.getElementById('vid');
var track = vid.addTextTrack('subtitles', 'test', 'en');
var capToggle = function (val) {
if (val == 'on') {
track.mode = 'showing';
} else {
track.mode = 'hidden';
}
}
</script>
ご覧のとおり (Chrome で表示)、キャプションの「オン」ラジオ ボタンを選択すると、キャプションがオンになり、デフォルト コントロールのデフォルトの CC ボタンがアクティブになります (不透明になります)。私が探しているのは、現在の状態を反映するようにラジオ ボタンを自動的に更新できるように、ユーザーがデフォルトの CC ボタンをクリックしたことを知る方法です。
特に実行する予定の他のすべてのスクリプトでは、この状態を確認するために一定の間隔で常に実行することは望ましくありません。新しいキャプションが表示されたときの「oncuechange」イベントがあることは知っていますが、値を更新するために数秒待たなければならないのではなく、すぐに確認するより良い方法があるかどうか疑問に思っていました.