IPTV小窓で動画再生とページフォーカス移動できない問題の解決_html/css

IPTV HD ページで、小さなウィンドウでビデオを再生すると、一部のセットトップボックス (HD ZTE、HD Daya 4904 など) でフォーカスが移動しません、つまりボタンが反応しません。私はこのバグに長い間悩まされてきましたが、解決策はわかっているだけで、原因はわかりません。今日実験を行ったところ、結果は次のように分析されました:

ページがビデオ再生メソッドを呼び出すとき、コードによって行われる実際の作業は、ビデオ ID、ビデオウィンドウの位置、ビデオウィンドウなどのパラメータを結合することであることがわかります。ビデオを再生する iframe の src については、再生コントロールが現在のページで実行されます (もちろん、これが当てはまると思います)。このコントロールは IPTV セットトップボックスでのみサポートされており、ビデオを再生するコードによって作成されたオブジェクトを PC ブラウザが認識しないため、PC 側でエラーが報告されます)、その場合、iframe はフォーカス状態になります。つまり、ページの現在のフォーカスはこの iframe にあります。リモコンを操作してフォーカスを移動しても、ZTE および Daya 4904 HD セットトップボックスではフォーカスが移動しません。

その理由は、iframe によって取得されたフォーカスが削除されていないか、そのフォーカスをページの他の要素に転送できないため、リモコンの方向キーを押してもページが応答しなくなります。

さて、この結論を証明しましょう。

HTML ページでは、a、img、input、および href または src 属性を持つその他のタグなど、多くの要素がフォーカスを取得したり失ったりする可能性があります。高解像度ページでは、要素のフォーカス (ここでは実際に使用する div タグを指します) は HTML ページのフォーカスではなく、JavaScript を通じてその CSS スタイルを変更して、現在の位置をマークします。これは、ページ上の操作対象のオブジェクトの位置をユーザー (実際の操作者) に伝えるために使用される外観であり、上記のラベル () によって取得されるフォーカスとは異なります。赤マーク）。フォーカス可能な要素は、.focus メソッドを使用して BOM 内のフォーカスを取得できます。一部のブラウザでは、フォーカスされた要素の周囲に点線のボックスが表示されます。このとき、キーボードの Tab キーを押すとフォーカスを切り替えることができます。

つまり、ビデオの再生に使用される iframe によって取得されるフォーカスは、IPTV ページで説明されているフォーカスと同じではありません。前者は HTML ページの実際の焦点であり、後者はマーク、つまりページ (最終的にはテレビ) 上での位置決めに使用される視覚的なマークです。実際には、この切り替えは JavaScript を通じて CSS スタイルを変更することで行われ、その結果、色の大きな変化。操作対象のオブジェクトの現在位置をユーザーに知らせるために使用される視覚効果。

このフォーカスはそのフォーカスではないため、フォーカスが切り替わったとき、つまりフォーカス喪失またはフォーカスイベントが発生したとき、ページ要素は異なる方法で処理されます。ページ上の実際のフォーカスは、それを受け入れることができる要素、つまり、href または src 属性を持つタグにのみ切り替えることができます。これらの要素がページ上に存在しない場合、またはこれらの要素が遠くにある場合、フォーカスは切り替わりません。通常通り切り替わり、元の位置に留まります。このとき、ページはフォーカスロック状態になります（ご自身で推測してください）。

理由がわかったので、元の問題を解決する方法を見つけました。

これは 2 つの方法で解決できます:

方法 1. 追加されたタグがページの美しさに影響を与えるのを防ぐために、実際のフォーカスを受け入れることができる要素 (a、img、input など) をページに追加します。ページの幅と高さを変更できます。これを 0 に設定すると、ページ上で非表示にすることと同じになります。非表示であっても、実際にはページ上に存在することに注意してください。もちろん、実際の焦点を置くことに消極的な要素の近くに、ここで実際の焦点を受け入れるためのラベルを追加するのが最善です。焦点を当てるには、電車のチケットを購入する必要があります。彼らは毛織物を喜んでいると思いますか？もちろん、一部のブラウザー (これは実際には高解像度のセットトップボックス) では、実際のフォーカスを持つ要素 (つまり、ビデオの再生に使用される iframe) は、現時点ではより寛大なものになります。何千マイルものことに集中するために、自分のポケットからチケットを購入してください。

方法 2: 実際のフォーカスを持つ要素の近くの要素を、ページの実際のフォーカスを受け入れることができる要素に変更します。ここで述べられていることは少しわかりにくいです。たとえば、iframe のフォーカスをその近くの div に移動したい場合は、この div をページの実際のフォーカスを受け入れることができる要素に設定できます。設定方法は? tabIndex 属性を div に追加できます。この属性の値は 1 ～ 32767 の任意の値です。この時点で、div は TAB キーのシーケンスに追加されます。

ここでは、tabIndex 属性が設定された要素間でフォーカスを移動するためのルールを簡単に紹介します。閲覧者が Tab キーを使用してページ上のフォーカスを移動すると、フォーカスは最初に tabIndex 属性値が最も小さい要素に移動します。最後に、最大の tabIndex 属性を持つ要素に移動し、最後に value 要素に移動します。同じ tabIndex 属性を持つ 2 つの要素がある場合、HTML コード内での要素の出現順序が優先されます。デフォルトの tabIndex 属性は 0 で、指定された tabIndex を持つすべての要素の後に配置されます。したがって、上記の 2 番目の方法では、div の tabIndex 属性値を 0 ではなく 1 に設定するのが最善です。また、tabIndex 属性が負の値 (tabIndex="-1" など) に設定されている場合、この要素は TAB キーのシーケンスから除外されます。

ここで、私たちが解決したかった元の問題に戻ります。

上記の方法 1 では、HD ZTE および HD Daiya 4904 セットトップボックスで a タグを使用することが可能です。この処理の後、他の HD セットでも使用できます。フォーカスを正常に移動できるトップボックスはサポートされていない影響はありません。 img タグと input タグはテストしていませんが、機能すると信じています。

2番目の方法については、HD ZTEとHD Daya 4904セットトップボックスをテストして、それが実現可能であることがわかり、私のアイデアを検証しましたが、HDセットトップボックスが動かせるかどうかはテストしませんでした。この方法では異常な問題が発生するため、通常はフォーカスが表示されます。ここでの現象の 1 つは、div に tabIndex 属性を設定した後、セットトップボックスの div の周囲にフォーカスボックスが表示されることです。これは通常の現象ですが、もちろん十分に美しいとは言えません。このフォーカスボックスを削除する方法については説明しません。

ちなみにこのフォーカス枠と言えば、フォーカスを獲得した後に要素に点線の枠が付くのですが、それをわざわざ消す人がいつもいます。実際、これは間違いなくページの使いやすさを踏みにじるものです。また、マウスを使用しない専門家、マウスが壊れた貧しい人々、視覚障害を持つ人々など、特定の特殊なグループのニーズも考慮する必要があります。。記事によると、米国では点線のボックスを削除することは違法だそうです。これは視覚障害者に対する差別です。ここから、米国が人権を尊重していることがわかります。これは、結局のところ、ユーザーエクスペリエンスと人間性への配慮に基づいています。そうは言っても、セットトップボックスの性能を議論しているので、フォーカスボックスは外した方が良いのですが、アメリカの姿勢は学ぶべきものです。

最後に、ページのフォーカスが a タグによって受け入れられるとき、a タグは、Tab キーと同様に、フォーカスを移動するためのリモコンの方向キーをサポートしているためです (a タグを使用して受け入れるすべての SD ページなど)フォーカス）、小さなウィンドウでビデオを再生すると、フォーカスを移動できない問題が発生します。これも上記の結論を証明します。

ここで問題が残っています。つまり、ビデオの再生に使用される iframe が tabIndex="-1" に設定されている場合、ページのフォーカスは移動できなくなりますか?時間の都合上、テストは行っておりません。

客観的な分析や検証をせずに急いで書いたので、どうしても偏った意見が含まれます。