ガイド: 弾幕の出現により、ビデオ視聴者の深い参加が増加し、弾幕は徐々に国内の主要なビデオ Web サイトでのコメント相互作用の最も基本的な形式になりました. この記事では、Netease Yidun の弾幕の原理と相互作用の実践を使用して紹介します.従来のチャット ルームと比較したバレット チャットの違いと実際の経験を詳細に説明し、バレット チャット システムの設計においてすべての人の参考になれば幸いです。
序章
2022 年の今日、弾幕は中国の主要な動画 Web サイトでのコメント インタラクションの最も基本的な形式になり、動画ソーシャル ネットワーキングに大きな活力を与えましたが、動画コンテンツのレビューにも大きな課題をもたらしました。厳しい審査シナリオでは、多数の弾丸画面が機械審査を通過した後、1 回または複数回の手動審査を行います.映像コンテンツのコンテキストは、監査された弾幕を正確に判断し、弾幕システムとの一貫性の高い弾幕システムを実現します.レビューの精度と効率を向上させるのに役立つオリジナルのビデオコンテンツと弾幕コンテンツ。次は、弾幕システムの実践でイードゥンによって要約された一般的な設計と実践です。
ブレットスクリーンの紹介
弾幕の発音は dàn mù です。これは、ビデオの上に多数のコメントがスクロールすると、フライング シューティング ゲームの「弾幕」のように見えるため、中国人はこのように命名し、日本語で弾幕と呼んでいます。注意、断幕ではありません。
弾幕の発明者は個人にはあまり明確ではありません. このコメントフォームは、最初に日本のオンライン動画共有サイトであるニコニコアニメーションに登場し、後にAcFunによって紹介されました. その後、ビリビリがこのフォームを引き継いだことを誰もが知った.弾幕が駅Bを作り、駅Bも弾幕の形を促進したこと。
現在、弾丸スクリーンを投稿することは、中国の主要なビデオ プラットフォームの最も基本的な機能になっていますが、私の現在の経験に基づくと、ステーション B は依然として弾丸スクリーンが最も多くありますが、実際には、Tencent Video と iQiyi の場合、映画やテレビのビデオ Web サイトの場合、多くのトリックは必要ありません。そうしないと、逆効果になる可能性があります。
弾幕の開発の理由
弾幕のコメントフォームが登場する前は、オンラインビデオユーザーの間のリアルタイムコミュニケーションは主にチャットルームモードでした. ユーザーがテキストコンテンツを入力した後、テキストリストは全体として下から上にスクロールします.次の図を参照してください。
次の図に示すように、弾幕が表示された後、ユーザーがテキスト コンテンツを入力すると、テキストがビデオの右側に表示され、独立したトラックで右から左に移動します。
どちらにもそれぞれの利点がありますが、現在のユーザーの視聴習慣に関する限り、バレット スクリーンがもたらすユーザー エクスペリエンスは、チャット ルーム モードよりも優れています。
画面密度に関するコメント
連打モードはチャットルームモードに比べて表示領域が広く、ユーザーが見ている情報の主体は動画コンテンツであるため、チャットボックスの幅を動画の幅よりも広く設定しているサイトはありません。同じコメントの場合、弾幕は横のトラックを移動するため、チャットルームモードのように文章が長すぎても高さを取りません。したがって、同じ画面では、人間の目には、チャット ルーム モードよりも弾幕モードの方が多くの情報を受け取ることができます。
更新頻度の見直し
チャット ルーム モードでは、すべてのコメントが同じ頻度で上にスクロールされ、コメントの外観はすべてのコメントを一番上に押し上げますが、弾幕モードでは、各コメントは独立したトラックで移動し、外観の影響を受けません。他のコメントの アルゴリズムの影響を受け、画面上の各コメントの表示時間はアルゴリズムによって保証されます。
眼球運動適応性
チャット ルーム モードでは、ビデオ コンテンツをフォローしている場合、ユーザーはコメントを読むことができません。弾幕モードを使用すると、ユーザーはビデオ画面にテキストをオーバーレイすることで、コメントを読みながらビデオを同時に見ることができます。2 つの領域の間で目を前後に動かす必要はなく、没入感が向上します。
以下は、チャット ルーム モードでの視線移動方向の概略図です。
以下は、弾幕モードでの視線焦点範囲の概略図です。
読書習慣
私たちのほとんど (アラブ諸国の人々を除く) は、左から右、上から下に読むため、1 行の情報を横に読む習慣がついています。
弾幕モードでは、テキストが右から左に移動し、人が左から右に読み、左から右に結合された力が形成されます. このモードでは、テキストの意味を短時間で理解できます.
以下は、弾幕モードでの視覚的な合力の方向の概略図です。
チャット ルーム モードでは、人々は左から右に読み、読み上げ内のテキストは常に上に移動し、斜め上向きの力を形成し、速く読むのを妨げます。
以下は、チャット ルーム モードでの視覚的な結果方向の概略図です。
心理的要因
弾幕の出現により、複数のユーザーが異なる時間と空間で同じビデオ時点に意見を述べることができ、時間と空間を超えたコミュニケーション感が得られ、ユーザーの参加意識が大幅に高まります。
動画を見ているある時点で、自分と同じような光景が連発でたくさん見られ、世の中には自分と同じ考えの人がたくさんいることを感じ、感覚が湧いてきます。共鳴の。さらに、人々が故意に笑顔になる非常に興味深い弾丸チャットが表示されることもあれば、知識を広げるのに非常に役立つ哲学的な弾丸チャットも表示されることがあります.
弾幕の実現方法
現在の市場では、弾幕の実現は 2 つの方法に分けることができます。1 つは HTML+CSS による方法、もう 1 つは Canvas による方法です。
前者の実装では、各弾幕にイベントを簡単に追加できます。たとえば、弾幕に移動して弾幕の上にホバリングし、ボックスから飛び出すという一般的に使用されるオプションなどです。これは、ネイティブ DOM イベントのおかげで簡単に実行できます。後者の実装は、自分で一連のイベント メカニズムを作成する必要があります. Canvas に慣れていない私のようなフロント エンドにとっては、より面倒ですが、数日を費やす意思がある場合は問題ありません。やれ。
両者にはまだパフォーマンスの違いがあります. 結論として, HTML+CSS のパフォーマンスは Canvas ほど良くありません. 前者はページの下に大量の DOM ノードを作成します. DOM ノードが多すぎる場合同じ画面で、一部の「古いマシン」でスタックする場合があります。ライブ ブロードキャスト中のパフォーマンス要件が非常に高いことがわかります.たとえば、多くのビデオ Web サイトのライブ ブロードキャストでは、Canvas を使用して弾幕を作成します.
次に、私たちのコード操作はすべて HTML+CSS の形式で実装されています. Canvas に興味がある場合は、同じ設計思想に従って記述することもできます.
弾幕デザイン
弾幕を実現するための機能設計を開始し、後でコードを実際に操作する前に、コードの意味を理解しやすくするために、事前の設計アイデアを全員に持たせました。まずは動画で通常弾幕画面を見てみましょう。
そのうち、「赤い線」で示したのは、弾幕の各ラウンドが転がる領域です. この領域をトラックと呼びます. 図には、一般的なスクロール弾幕とボトム弾幕も描かれています. もちろん、簡単にするために、上は弾幕を描きません。
現時点で確認できる情報は、弾幕システムにはトラックを運ぶロジックが必要であり、その背後にある司令官は、新しく追加された各弾幕がどのトラックに移動するか、いつ弾幕のレンダリングを開始するか、およびアニメーション ロジックを決定する必要があるということです。
追跡
バレットチャットの演出効果から、トラック内に複数のバレットチャットが存在することは明らかであり、バレットチャットの出現はシーケンシャルに行われるため、これらのバレットチャットを入れるためのコンテナと、別のバレットチャットを入れるためのコンテナが必要であることがわかります。適切なタイミングで必要になります。コマンダーがこのタイミングを計算するには、すでに占有されているトラックの幅を表す可変オフセットも必要です。
上記の簡単な分析によると、最初にこのトラックを表すクラスと必要な属性を定義できます。
コンテナには弾幕の配列がありますが、弾幕を追加および削除するにはどうすればよいですか? 次に、メソッドを定義します。
最後に、特に重要な線路占有幅の更新方法ですが、後で弾幕アニメーションをレンダリングする際に、弾幕が線路に入るタイミングを占有線路幅で計算するので、弾幕 画面が移動するたびに、トラックの占有幅を更新する必要があります。
これは非常に簡潔で明確なトラック全体の設計であり、その責任は非常に明確です。トラック内の弾幕の占有幅の追加、削除、更新を管理しますが、レンダリングは担当しません!
(ここを見て、ロジック コードを注意深く理解したい場合は、この倉庫をクリックしてソース コードを表示できます: https://github.com/vortesnail/qier-player/tree/master/packages/qier-プレーヤー弾幕)
司令官
前回の記事からわかるように、ビデオ キャンバスには複数のトラックがありますが、これらのトラックを管理するにはどうすればよいでしょうか。それは後ろの指揮官が「持ち越し」です。
1 つ目は、指揮官が現在の弾幕タイプで 2N トラックを管理することです。
そして、今回の弾幕デザインには、スクロール弾幕、上部固定弾幕、下部固定弾幕が含まれているため、指揮官の階層関係は次のようになります。
ただし、これらのコマンダーには共通の属性とメソッドがあり、基本コマンダー クラス (BaseCommander) に抽象化できます。単純なコード構造は次のとおりです。
コマンダーの基底クラスを使えば、さまざまな種類のコマンダーを個別に実装できます. コマンダーの実装コードをここに掲載するのではなく、思考マップを置きます. 興味がある場合は、ソースコードをもう一度読むことができます : https ://github.com/vortesnail/qier-player/tree/master/packages/qier-player-danmaku
与える
上の図では、「ユーザーが弾幕を送信する」ステップを除いて、他のすべてのステップがレンダリングのコア実装であるため、このメソッドを分析してみましょう。その職務は次のとおりです。
待機列から適切な弾幕を取り出してトラックに入れる
各コマンダー (司令官) には、キャンバスにレンダリングされていないすべての弾丸チャットを格納する独自の待機キュー WaitingQueue があります.render メソッドが実行されるたびに、待機キュー内の弾丸チャットを適切なキューに追加する必要があります。このプロセスは、extractDanmu メソッドによって実装されます。
ここでの考え方は、待機キューにあるバレットチャットをトラバースして、add メソッドでトラックに追加してみることです. 追加に成功したら、待機キューからバレットチャットを削除し、後でバレットチャットを追加します.
ただし、トラバーサル プロセス中に追加失敗が発生した場合、すべてのトラックに新しい弾幕を追加する方法がないことが証明され、トラバーサルを停止する必要があります。
add メソッドの役割は、弾幕を適切なトラックに追加することです。この目的を達成するには、次のプロセスが必要です。
1.正しいトラックを見つけます。
2. 実際の弾幕 DOM を作成し、速度を計算します。
3. 追加するトラックの弾幕配列に押し込み、弾幕のオフセットを計算します。
さらに add は Commander 基底クラスから継承された抽象メソッドの具体的な実装です. ここでは実装の例として最も複雑なスクロール弾幕を取り上げます:
上記のコードの最初の行は findTrack メソッドです。目的は正しいトラックを見つけることですが、正しいトラックを見つける方法は?
ここで採用された実装戦略は比較的直感的でシンプルです. トラックを上から下にトラバースして、挿入できる最初のトラックを見つけます.
適切なトラックが見つかった場合、その添字が返され、次のロジックが引き続き実行されます。それ以外の場合は false が返されます。
次に、弾幕の速度の計算方法を見てみましょう. ここで、弾幕の速度は製品の好みによって異なります. 以下に2つのタイプを紹介します.
1. 各弾幕の速度は同じであるため、衝突の問題はありませんが、効果は非常に硬直的です。
2.各弾幕の速度は異なりますが、衝突の問題を解決する必要があります。
さまざまな速度を達成するために、最も簡単で効果的な方法は、追跡問題を通じて弾幕の最大速度を見つけることです。
トラックの長さが現在 L であると仮定すると、トラック上に存在する最後の弾幕 A はすでに距離 S を飛行しており、その速度は vA として知られています。弾幕 B の速度を計算する方法は?
まず、バレットチャットBとバレットチャットAが同時にトラックの終わりに到達するとすると、次の式が得られます。
したがって、弾丸スクリーン B の速度が vB であり、コード内の変数名が赤い式であると推測するのは非常に簡単です。
しかし、このように問題が発生します. 偽の弾幕スクリーン A がほぼトラックの終わりにあるため、弾丸スクリーン B の計算速度が大きくなりすぎます. 具体的なパフォーマンスは、弾丸スクリーンが速く飛ぶことです.この種のエクスペリエンスは非常に悪いため、最大速度制限を設定する必要があります. 上記の add メソッドには、これを行うコード行があります:
ここで、defaultSpped サイズは平均速度であるため、ここでの制限は平均速度の 2 倍です。
次は作成した弾丸チャットDOMを指定したトラックのdanmus配列に入れてレンダリング待ちです。
トラック配列をトラバースし、トラック内の弾幕を 1 つずつレンダリングします
render メソッドの実装をリリースするには、主に次の 4 つのプロセスを経ます。
1. 各トラックの各弾幕をトラバースします。
2. ブレット チャット DOM を取得し、translateX を計算します。
3. トラックのオフセット オフセットを更新します。
4.キャンバスを越えて弾幕を取り除きます。
上記のコードは、対応するプロセスを簡単に確認できるはずなので、ここでは詳しく説明しません。
要約する
最後に、中国ネットワーク視聴覚プログラム サービス協会が「ネットワーク ショート ビデオ プラットフォーム管理基準」と「ネットワーク ショート ビデオ コンテンツ レビュー基準規則」を発行し、ショート ビデオのパブリッシャーとプラットフォームの詳細な要件を提示したことに言及する価値があります。見どころの「弾幕」を「試してから放送」の範囲に分類し、レビューしてから放送する「リアルタイム運営」を行い、弾幕が健全な展開を迎えること。
何百万人ものユーザーが同時にオンラインに接続しており、同時実行性の高い集中砲火は、かつて Web サイトのコンテンツ エコロジー管理にとって大きな課題となっていました。主な問題は次のとおりです。ネチズンの意地悪な発言、積極的にマシン レビューを迂回すること、および多数の弾丸画面のために、多くの有害なコンテンツが「ネットをすり抜けた魚」になることは避けられません。社会に報復するトロールであろうと、競合他社の黒人ファンであろうと、彼らは視聴者の視聴体験を破壊し、ライブ放送プラットフォームのコア競争力を脅かします.
ブレット チャット レビュー プロセスでは、Yidun は Web サイトのブレット スクリーンに「機械レビュー + 人間によるレビュー + レポート」メカニズムを提供し、機械学習を使用してブレット スクリーンを自動的に判断し、人間が柔軟に対応できるように支援します。コンテンツエコロジーの悪化。弾幕はテキストの形で「スマートレビュープラットフォーム」に統合され、「コンテンツインテリジェント検出技術」と「手動レビュー」の2つのスクリーニングの後、広告、ポルノ、暴力、その他のネットワーク監視のタイムリーな発見に加えて厳格に禁止されているコンテンツは、ホストのニーズに応じて、ホストにリアルタイムで制御可能なインターフェイスを提供することもできます.関連するブラックファンの攻撃スピーチとリズミカルな言語テキストを追加することにより、リアルタイムのブロックを実行して、ホストのファンの観覧雰囲気。
プラットフォーム コンテンツの安全性をどのように確保するかは、弾幕を含むウェブサイト開発のほぼ最優先事項ですが、弾幕の「ポジティブなエネルギー」に反するコンテンツは、セキュリティ リスクに直面します。この記事では、弾丸スクリーンの従来の設計、実装、およびセキュリティ保証の考え方について簡単に説明します. 弾丸スクリーンの速度、および言及されていないイベント監視など、最適化できるポイントはまだあります.特定の実装では、ソース コードを読むことができます: https://github.com/vortesnail/qier-player/tree/master/packages/qier-player-danmaku