最近のブラウザで flash に半透明 div を被せたらどうなるか
flash に「wmode="opaque"」つけると HTML 要素を被せられることはflash 上でマウスジェスチャーできるようにする user.js (wmode="opaque") - m2O - チーム俺等で書きましたが、最近のブラウザでどうなっているのかというのを試してみました。
サンプルとして使用したのは以下の動画です。
FF6オペラを(opera)ボーカロイドで(vocaloid)ver高音質(high-quality) - YouTube
このページを開いて以下のブックマークレットを実行しました。
javascript:void(document.body.appendChild(document.createElement('div')).style.cssText='position:absolute;zIndex:9999;top:50px;left:100px;width:300px;height:300px;background:rgba(255,255,0,0.5)')
Opera10.10
私が今でも愛用している Opera10.10 です。
古いブラウザですので、前述のように「wmode="opaque"」を付けないと z-index に関わらず上に被せることができません。
「wmode="opaque"」を付けると上に被せることができて、被せた部分が半透明になり、下の動画が見えるようになります。
Opera12 (alpha)
Opera の現在の開発バージョンである 12 です。
被せている部分の動画は見えず、白く(動画の下の要素が)見えています。これは現在の安定バージョン(11.50) と同じ動きです。
Opera さんはほんとに奇妙な実装をしますね。
画像は省略しますが、Opera10.10 と同じように「wmode="opaque"」を付けると上に被せることができて、被せた部分が半透明になり、下の動画が見えるようになります。
Firefox 5
Firefox 最新バージョンの 5 です。
Opera10.10 と同じです。
こちらも画像は省略しますが、「wmode="opaque"」を付けると上に被せることができて、被せた部分が半透明になり、下の動画が見えるようになります。
Google Chrome 12
「wmode="opaque"」をつけなくても、被せた部分がきちんと半透明になり、下の動画が見えています。期待通りの動きです。
こちらも Firefox5 と同じでした。
まとめ
Opera12 での挙動が奇妙だったので他のブラウザも調べてみたら、
Google Chrome が期待通りの動きをしてくれて驚きました。
が、他のブラウザを見ると
まだまだ HTML 要素を重ねて使用したい場合は wmode をつけた方が良いようです。
wmode については 日本語入力が行えなくなる などの不具合が言われていましたが、最近の flash プレイヤーではどんなんですかね？ その辺は調べてません。
