fancyBoxで動画再生ができない場合の対応方法
fancyBoxでフローティングウィンドウを生成し、その中のvideoタグで記述された動画を再生しようとしたところ、iPadのSafariではうまく再生できない現象に悩まされました。解決方法をメモしておきます。（iPhoneも同様だったのでiOSと言った方が正確ですが。）
fancyBoxって？
自らを “Fancy jQuery Lightbox Alternative” と名乗るLightboxライクなフローティングウィンドウ系のjQueryライブラリです。画像はもちろんのこと、inline、Ajax、iframe、swf、htmlもサポートしています。
フローティングウィンドウ系のjQueryライブラリは、本当にたくさんの種類があります。どのライブラリもほとんど同じような機能を持っているので、お好みで選択してしまっても問題ないと思います。僕はfancyBoxのiPadでiframeを表示させたときにレイアウトが崩れないところが特に気に入っています。
参考リンク
環境
環境は以下の通りです。
ソフトウェア
| ソフトウェア | バージョン |
|---|---|
| fancyBox | 2.1.2 |
実行環境
| 機種 | OSバージョン |
|---|---|
| iPad 2 (2011) | 5.1.1 |
| new iPad (2012) | 6.0 |
fancyBoxのフローティングウィンドウ内にvideoタグで動画を表示させる
1. 最初に書いたコード
以下のソースコードは、PCでは問題なく動作したのですが、iPadのSafariでは、再生ボタンは表示されるけど、タップしても無反応という状態でした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.2"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.2" media="screen" /> <script type="text/javascript"> $(function(){ $("a.fancybox").fancybox({ autoSize: false, width: "90%", height: "90%", }); }); </script> </head> <body> <a href="#video" class="fancybox" >Open</a> <div id="video" style="display: none;"> <video controls src="mov/example.mp4" width="150px" height="100px"></video> </div> </body> </html> |
2. コード修正
fancyBoxで生成されているオーバーレイの挙動が怪しかったので、CSSでz-indexを調整してみたりしたんですが、どうもダメでした。Googleで fancyBox iPad videoあたりをキーワードに検索をしてみると、結構な数の人が同様の悩みを抱えているようでした。 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'として、コーデックを指定すると良いという回答もありましたがうまくいきません。残念ながら日本語の情報にも行き当たりませんでしたが、GitHubのIssueを見つけました。
HTML5 audio/video doesn’t work using fancybox overlay on iOS
その中にあるfancyApp制作者の回答。
This issue is not related to fancyBox. It can display any html content (example – http://jsfiddle.net/Vv9ZA/) and it is up to how you are using it.
うん。これです。これで解決できました。原因究明とは行きませんでしたが、対応方法はわかりました。以下が修正版のソースコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.2"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.2" media="screen" /> <script type="text/javascript"> $(function(){ $("a.fancybox").fancybox({ autoSize: false, width: "90%", height: "90%", content: '<video controls src="mov/example.mp4" width="150px" height="100px"></video>' }); }); </script> </head> <body> <a class="fancybox" href="#">Open</a> </body> </html> |
3. コードを発展させる
とりあえずは上記の方法で対応できるんですが、フローティングウィンドウ内にはvideoタグ以外の情報も当然ながら盛り込みたいわけです。contentの中にだらだらとHTMLを書き込んでいくのは、メンテナンス性も下がるので極力避けたいと思って考えたのが以下の方法です。1. と、2. のハイブリッド版と言ったところでしょうか。afterLoadで、video要素だけ後からappendしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.2"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.2" media="screen" /> <script type="text/javascript"> $(function(){ $("a.fancybox").fancybox({ autoSize: false, width: "90%", height: "90%", afterLoad: function() { this.content.find("#player").append('<video controls src="mov/example.mp4" width="150px" height="100px"></video>'); this.content = this.content.html(); } }); }); </script> </head> <body> <a href="#video" class="fancybox" >Open</a> <div id="video" style="display: none;"> <h2>Great product</h2> <h3>商品概要</h3> <div id="player"></div> <div id="description">この商品は本当に素晴らしいんです。etc., etc.</div> <h3>商品情報</h3> <div id="information">etc., etc.</div> </div> </body> </html> |
4. あれ？最初のコードも動いたよ？
3. の方法でゴールだったんですが、その後、リファクタリングをしていく過程で、偶然にも1. のコードに少し手を加えるだけで動作することがわかりました。中の動きまでは追ってませんが、これで動くってことは、iOSのSafariの問題なんだろうなーと思う僕なのでした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.2"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.2" media="screen" /> <script type="text/javascript"> $(function(){ $("a.fancybox").fancybox({ autoSize: false, width: "90%", height: "90%", afterLoad: function() { this.content = this.content.html(); } }); }); </script> </head> <body> <a href="#video" class="fancybox" >Open</a> <div id="video" style="display: none;"> <h3>商品概要</h3> <div id="player"><video controls src="mov/example.mp4" width="150px" height="100px"></video></div> <div id="description">この商品は本当に素晴らしいんです。etc., etc.</div> <h3>商品情報</h3> <div id="information">etc., etc.</div> </div> </body> </html> |
fancyBox動画再生に関連しそうな記事
今回の内容とはそれますが、関連のある記事を見つけました。参考まで。