PC用で見る場合、最大解像度の動画をユーザに見せたい。
スマホ用は、回線速度とかあるので、画面にあった解像度で。
両方共、関連動画は見せないのと、オートプレイオンで。
（colorboxを使って、オートプレイオフだと、動画ボタンを２回押す形になるため、オートプレイオンで。）
最終的に下記形で設定した。
(&は埋め込みなので、html文字列に変更してます)
PC用
//www.youtube-nocookie.com/embed/xxxxxx?rel=0&autoplay=1&wmode=transparent&vq=highres
スマホ用
//www.youtube-nocookie.com/embed/xxxxxx?rel=0&autoplay=1&wmode=transparent
参考にしたパラメータ
rel=0 再生が終わった後に関連動画を出さない
autoplay=1 自動的にサイト開いたら再生
wmode=transparent 位置とかの設定
vq=highres 最初から1番良い画質で表示
fs=0 フルスクリーンボタン出さない
ドメイン
www.youtube.com クッキー情報を見る（自分のよく見るやつとかで関連付けの奴が出る）
www.youtube-nocookie.com （その動画の関連付けの奴が出る）
API
//www.youtube-nocookie.com/v/xxxxxx（サイズの拡大縮小が出来ない、またIE10以上でcolorbox内の画面サイズがおかしくなった。）
//www.youtube-nocookie.com/embed/xxxxxx（なぜかchromeのPCで、最大解像度で再生が始まらない。。。）
どっちも完璧では無いですが、表示が崩れるよりはマシということで、
embedの方を使うことになりました。
IEは相変わらず、奇っ怪な動きをしますね。。。
サンプルです。（ホスティングサイト以外からもファイルをリンクしているので、テスト以外では、ファイルをダウンロードして使ってください。）
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="https://code.google.com/p/pwi/source/browse/trunk/jquery.pwi/js/jquery.colorbox/colorbox.css" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script src="https://code.google.com/p/pwi/source/browse/trunk/jquery.pwi/js/jquery.colorbox/jquery.colorbox-min.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); | |
| $("#click").click(function(){ | |
| $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| <body> | |
| <p><a class='youtube' href="//www.youtube-nocookie.com/embed/xxxxxx?rel=0&autoplay=1&wmode=transparent&vq=highres | |
| </body> |
0 件のコメント:
コメントを投稿