3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【IE11対応】clip-pathを使用せずに動画をテキストやシェイプでマスクする方法

Last updated at Posted at 2019-09-16

テキストでマスク

See the Pen Cool UI - Mask the Video with TEXT by Loki (@loki__codepen) on CodePen.

パスの描画(シェイプ)でマスク

See the Pen Cool UI - Mask the Video with Path by Loki (@loki__codepen) on CodePen.

SVGデータそのままでは実装できません。一度canvasタグ内のJSで描画できる記述方法に変換してあげる必要があります。
手持ちのSVGデータでマスクを取りたい場合は、以下のサイトで<path>タグをCanvasRenderingContext2Dに変換すると良いでしょう。

SVG to HTML5 Canvas Converter
http://www.professorcloud.com/svg-to-canvas/

作成した背景

clip-pathを使用すると簡単にマスクが実装できますが、IE11だと動きません。
動画をマスクする方法をぐぐってみても、IE11非対応のclip-pathを利用した方法しか出てこなかったので作成しました。
使いみちとしては、基本はclip-pathを使用しつつ、UserAgentで判断してIE11のときに使用してください。


Twitterのフォロワーを募集しております!
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)

Twitter - https://twitter.com/hiroki_web

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?