Canvas ビデオ マスク プラグインのサンプル共有

ビデオにオーバーレイを追加して、ビデオの特定の領域（10 ～ 20 分など）の間、区切られた領域が表示されなくなります。アプリケーション シナリオには、衛星 TV アイコンのブロック、ビデオの右下隅の広告のブロック、モザイクとしての機能などが含まれます。この記事では、主に Canvas ベースのビデオ マスク プラグインを詳しく紹介し、ビデオにカバーを追加する方法を詳しく紹介します。必要な方は参考にしていただければ幸いです。みんな。

長いビデオには複数のマスクが含まれる場合があり、各マスクには特定の表示時間があります (この時間外ではマスクは非表示になります)。

ビデオ マスキングのフロントエンド実装

には、p ベースと 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. マスク(長方形)を描画

2. マスクスタイルを設定(API提供)

3. マスクの移動

4. マスクズーム

5. キャンバス マウス スタイルの変換

カプセル化された API

マスク時間の例:

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]

ついに

700行を超えるベースの小さなプラグインネイティブ キャンバスでは、キャンバスの世界を探索することができます。まだ始まりにすぎません。

関連する推奨事項:

jQueryの実装例 IE6と互換性のあるマスキング機能の共有

ページがマスクレイヤーの背後でスクロールしないようにする方法の例

マウスを置くことでマスキング効果を実装するJSコード画像のケース

以上がCanvas ビデオ マスク プラグインのサンプル共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。