モバイル用ビデオプレーヤーでセクション（章、ブックマーク...）を表示する方法は何ですか？

Question

ビデオコンテンツのテキストによる説明と、タイムラインへの対応するリンクがあります。そのようなセクションをユーザーに表示するための適切な方法はありますか？そのため、すべてのセクションを表示してそれらをナビゲートできますか？例はありますか？

実装の詳細に限定されないため、問題は技術的なものではありません。 UXはプレイヤーメカニクスについてです。 ビデオのチャプターがどのように表示されるかについて、良い習慣を知っている人はいますか？さらに、それらを横向きと縦向きの両方で見ることができるはずです。

PD：問題の詳細

ビデオは録音された講義であり、章は講師がカバーする対応するトピックです。したがって、それらを静的ブックマークとして解釈できます。 90分のビデオで約10章。
携帯電話やタブレット向けに設計されたモバイル製品です。タブレットサイズではサイドメニューに章のリストを表示できますが、携帯電話（4.5 "-5.5"）、特に縦向きでは問題になります。
講義の内容を見て、興味のあるところに行き、見ながら新しい章に気づいてほしい。

私が作成しようとしているそのような行動の既存の例として、ここにいくつかの写真を残しています：

ここでコメントはタイムラインにマークされます

ここでは、チャプターのリスト全体がビデオの上に置かれています

PD2：UdacityについてAndroid app

それらの実装は簡単です。レッスントピックリストのアクティビティとビデオの別のアクティビティがあります。 next-prevを使用して連続してチャプターを切り替えることはできますが、ビデオを閉じずにレッスンの説明にアクセスすることはできません。アクティビティとビデオの切り替えには時間がかかり、スムーズでない動作になります。

Lucas Cerro · Accepted Answer

私見、それは起源（あなたによるブックマーク、またはユーザーによるコメント？）とマーカーの数、および（マーカー内の）テキストの量とビデオの長さに依存します。これらの変数が互いにどのように影響するかを考えてください。

タイムラインのコメントにはすでにsoundcloudのパターンを採用しているようですが（これはすばらしいことです）、コメントや、自由に追加できるブレークポイントには明らかに適切です。

これが事実なら、完璧です。そうでなければ、それは最善のアプローチではないかもしれません。ユーザーが探しているものに対応するテキストを特定するために（マウスを持っている場合）ユーザーがホバーする必要があるのはイライラするかもしれません。

したがって、ビデオ内のnavigatingの場合、目次形式は確かに好都合です。 YouTubeなどのサイトでのユーザーの「ハッキング」は、ユーザーがパターンをどのように使用し、支持しているかを示しています。

Skillshareはサイドバーを使用しますが、技術的にはさまざまな動画の再生リストです。

したがって、目次パターンがおそらく最良ですが、ユーザーがどこにいるかを示すためにある程度のアフォーダンスが必要になる場合があります。また、目次を開いたり閉じたりできるため、画面スペースが最適化される場合があります。簡単な例：

お役に立てれば！

UPDATE 1

あなたのポイントについてコメントします：

•ビデオは録音された講義であり、章は講師が担当する対応するトピックです。したがって、それらを静的ブックマークとして解釈できます。 90分のビデオで約10章。

マーカーがチャプターである場合、IMHOはユーザーがそれらと常に対話する必要がないと想定しても安全です。私が提案したように、章をオーバーレイを開くボタンの後ろに隠すことができると思います。これらの章は他のすべての前に表示され、使用可能なビューポートに適応できるため、これらの章の画面の向きはそれほど重要ではありません。あなたはcouldですが、各章のフォントサイズとサブタイトルを考えて、ユーザーがジャンプする内容（文字どおり）をユーザーにわかりやすくします。

•携帯電話やタブレット向けに設計されたモバイル製品です。タブレットサイズではサイドメニューに章のリストを表示できますが、携帯電話（4.5 "-5.5"）、特に縦向きでは問題になります。

•ユーザーに講義の内容を見てもらい、興味深い部分に移動し、見ながら新しい章に気づいてもらいたい。

これは、新しい問題と考えられるパターンを示しています。講義ビデオの場合、コンテンツを操作する2つの主な方法を考えることができます。

1）横長モード：ビデオ全画面表示なので、ビデオ内のコンテンツを読みやすくなります。そして

2）縦向きモード：ビデオは画面の上部3分の1を占めます（コンテンツを読み取れるようにする必要がある場合は、おそらく修正され、を参照してくださいビデオ）、ユーザーは見ながらコンテンツを確認できます。 YouTubeアプリが右下隅に固定されたミニチュアビデオをどのように表示するかを考えてください。あなたの場合を除いて、あなたはそれを画面の上部1/3に全幅で提示するでしょう。横に傾けると、ビデオは他のコンテンツなしでフルスクリーンになります。

ここでは「目次」が二次的なものになる可能性があることに注意することが重要だと思います。表示するコンテンツが多すぎるため、常に表示する必要はありません。あなたの場合、ビデオを見ながらコンテンツを読むというマルチタスクを解決することの方がはるかに重要だと思います。

更新2

はい、私はudacityにいくつかの問題を見つけました。そのため、私はそれらについて言及しないことにしました。説明を読むためにビデオを閉じる必要があるのは、YouTubeが何年も前に解決したことです。

Prev/nextボタンの実装は興味深いですが、同じビデオでスクロールしている場合は意味がありません。あなたの場合、ボタンがwithinビデオ、次のマーカー、またはto the next video（再生リストが存在する場合）に進むかどうかについてユーザーを混乱させる可能性があります。

最後に、おそらくチャプターの切り替えと同じ問題、プリロードがあります。帯域幅に多くのお金を費やして、すべてのユーザーが2分間しか視聴していなくても、90分間以上の動画をダウンロードできるようにするつもりがない場合は、そして、あなたがそうしたとしても、多くの帯域幅を持つユーザーが中断することなく他の章にジャンプできるかどうかにかかっています。

私は、プリロード（および可能であればyoutubeのDASHテクノロジーを使用）はスマートで必要な妥協だと主張します。

UPDATE 3

サイドノート。私は何かに気づきました。Googleはすでにビデオ内コメントの部分を解決しています。それらはAnnotationsと呼ばれます。動画にアノテーションを含めるのはクリエイターのみです（YouTubeの場合）が、タイムラインよりも画面上にアノテーションを配置することをお勧めします。これにより、ユーザーがスクロールするときに誤ってアノテーションをクリックしたり、その逆をしたりしないようにします。その逆。

Soundcloudが使用するタイムライン上の注釈のモデルが採用される可能性があります注釈を追加するスペースがないためのみ。

もう少し推測する：ビデオの注釈としてコメントを許可する場合は、ユーザーあたりの数を制限し、ユーザーがコメントを非表示にしてすべてを固定サイズ（44x44ピクセルなど）にすることをお勧めします。最大文字数が少なく（おそらくツイートの半分か？）、一定の時間（10秒など）で表示されます。そうすることで、トロルの影響を減らすことができます。リンクはありません。