ビデオにオーバーレイを追加すると、ビデオの特定の期間（10 分から 20 分など）の間、区切られた領域が表示されなくなります。アプリケーション シナリオには、衛星 TV アイコンのブロック、ビデオの右下隅の広告のブロック、モザイクとしての機能などが含まれます。
長いビデオには複数のマスクが含まれている場合があり、各マスクには特定の表示時間があります (その時間外ではマスクは非表示になります)。
ビデオマスキングのフロントエンド実装div ベースと Canvas ベースの 2 つの技術的ソリューションがあります。この記事は Canvas を使用して完成します。
主な原則は、透明なキャンバス レイヤーを HTML ビデオ タグにアタッチし、mousedown、mousemove、mouseup イベントに応答することです。 Canvas イベントは Canvas 要素のみに基づいているため、Canvas 内の各要素 (四角形、円など) のイベント応答は、座標を使用した独自のコードで完了する必要があります。
プラグインの GitHub アドレスhttps://github.com/cunzaizhuyi/maskPlugin
デモアドレス
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
ファンクションポイントの実装| 名前 | 値の型 | 説明する |
|---|---|---|
| 1. 長方形に関する設定 | ||
| 塗りつぶしスタイル | 色の値 | 四角形の塗りつぶしの色、デフォルトは「#eeeeee」です |
| ストロークスタイル | 色の値 | 長方形の境界線の色、デフォルトは「#0000ff」です |
| inRectCursor | 弦 | マウスが小さな四角形の中にあるときのマウスのスタイル。デフォルトは「移動」です。 「ポインター」などに設定できます。 |
| 2. 長方形境界上の 8 つの小さな長方形に関する設定 | ||
| bRectsStrokeStyle | 色の値 | 長方形の境界線上の小さな長方形の色。デフォルトは「#0000ff」です。 |
| b辺の長さ | 番号 | 長方形の境界上の小さな長方形の辺の長さの値。デフォルトは 6 です。 |
| 3. マスキング時間関連 | ||
| マスク時間 | 各マスクの表示開始時刻と表示終了時刻。1 つのマスクが四角形に対応します。 |
[{マスクId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}]やっとネイティブ キャンバスをベースにした 700 行を超えるこの小さなプラグインは、キャンバスの世界を探索するための始まりにすぎないかもしれません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。