小さい広告的な Flash を Chrome で自動再生させちゃうアレ
Posted: Updated:
重要でない Flash を Chrome は遮断する
Googleは、ChromeでFlashをあからさまに遮断するわけではないが、動画などの「中心的コンテンツ」の再生のみを許可し、Flashアニメーションなどの周辺コンテンツは一時停止させる。 「Chrome」、Flash広告をデフォルトで停止に--9月1日から - CNET Japan
Chrome のデフォルト設定では重要でないとされる広告的なサイズの Flash は自動再生が行われないようになっています。
業務でこの仕様について調べたところ、Flash がある一定以上のサイズで表示されていれば自動再生されますが、ある一定のサイズを下回ると自動再生されなくなることが分かりました。
Width 基準なのか Height 基準なのか、はたまた面積なのか画面サイズやウインドウサイズに対する相対値なのか、他にも条件があるかもしれません。詳細は不明ですが大雑把には表示領域のサイズが基準であると判断してよいでしょう。
シンプルな回避方法
調査当時では案外シンプルな方法で誤魔化せました。
- 不可視状態で正常に自動再生されるサイズで配置する
- load あたりのタイミングで目標の小さいサイズに縮小して可視化
これだけです。こういうものは広告と相場が決まっているので、下記は iframe の中に Flash が配置されている想定のサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var embed = document.getElementById('embed');
embed.onload = function() {
// 適当に想定サイズへ縮小（不安定なら setTimeout を挟むと良い）
embed.width = 280;
embed.height = 158;
embed.className += ' visible';
};
});
</script>
<style>
body {
background: #f0f0f0;
}
#embed {
opacity: 0; /* visiblity や display でも多分動く */
transition: opacity 1s;
}
#embed.visible {
opacity: 1;
}
.container { /* overflow: hidden で切ると Chrome 48 以降でNG */
width: 280px;
height: 158px;
background: #fff;
}
</style>
</head>
<body>
<div class="container">
<!-- 適当に大きいサイズで設置しておく -->
<iframe id="embed"
src="http://example.com/flash-embeded.html"
width="496"
height="280">
</iframe>
</div>
</body>
</html>
iframe の中だけで Flash が大きくてもダメぽかったので、最終的に Flash が露出している矩形が見られているような気がしつつ、そのわりに不可視なのは良いのか...という感じ。
うん
ごめんなさい(´・ω・`) 雑なメモですが、Flash 亡き平和な世界を望んでいるマンからお送りしました。
自動再生 Flash しね
