IE以外のブラウザーで動画再生が出来ない

だいぶ前から、DropboxとJW Playerを使ってブログに動画を埋め込んでいます。
自分が普段使っているブラウザー(IE8)では問題なく再生されていたので、
他のブラウザーでどう再生されるかは気にしてませんでした。

特に理由はないのですが、FlashプレイヤーなのでApple以外は
再生出来てると漠然と思ってました。
Appleについては持ってないのでどうしようもないし…。

ところが先日、「第11回利根スカイフェスティバル」で見た、
PINKISHという女の子3人組のライブ動画を紹介し、
スマートフォンも持つようになったので、
スマートフォンでどう見えるかが気になって見てみました。

そうしたら、スマートフォンでは動画の再生画面自体が表示されてません。
再生画面が表示されてないだけでなく、
逆に表示されてはいけないはずの埋め込み用のコードの一部が表示されてます。
そんなこと全く思ってなかったのでビックリしました。

下が使用していたコードです。


<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='480' height='290' id='single1' name='single1'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=Sample.mp4&backcolor=FFFFFF&frontcolor=000000&lightcolor=000000&screencolor=000000'>
<embed type='application/x-shockwave-flash'
id='single2'
name='single2'
src='player.swf'
width='480'
height='290'
bgcolor='undefined'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='file=Sample.mp4&backcolor=FFFFFF&frontcolor=000000&lightcolor=000000&screencolor=000000'/>
</object>



テキストファイルにサンブルコードとして保存しておいて、
2ヶ所ある「Sample.mp4」の部分だけ正規のファイル名に置き換えて使ってます。
自分が使っているブラウザーでは動画再生用の画面が表示されるんですが、
スマートフォンでは、「id='single2'」以降のコードがそのまま表示されてました。


あれこれ調べてみましたが、原因が全くわかりません。
この後にも「RC航空ページェント」のジェット機の動画をアップするつもりだったので、
どうしたらいいものか悩んでました。

JW playerのホームページを確認するとバージョン6になっていて、
埋め込みコードも変わってたのでインストールしたのですが、
これだと自分のブラウザーでもうまく動きません。

しかたなく「JW player」以外の動画プレイヤーを探したら、
「Mediaelement.js」というのがあったので、
インストールして埋め込んで見ましたが、
再生はされるものの画面の表示をうまく設定出来ません。
とりあえず、RCジェット機の動画についてはこれを使う事にして、
28日にとりあえずアップしましたが、まだ気になって原因を探してました。



その後、うまく表示出来てないページのソースを見ていたところ、
「embed type='application/x-shockwave-flash'」の後に「<br />」
が入っているのに気がつきました。
テキストファイルに「<br>」は入ってないのに、
ブラウザーのソースに入ってしまうのは何故か。
さらに調べたら、

FC2ブログの場合、「環境設定-投稿設定」の「自動設定」の項目を、
「改行をそのまま反映」にしてると「<br />」が入って問題が起きる場合がある。


といった内容が書かれているサイトがありました。
確かに自分も自動改行になっている方がなにかと書きやすいので、
そういう設定にしてます。

埋め込み用のコードは「JW player」のサイトから、
サンプルコードをコピーしてきたと思うのですが、
見やすくするために「embed」以降のパラメータを、
1行ずつにしてたのかも知れません。

それをそのまま自分のブログにペーストした為、
それぞれのパラメータの後ろに改行が入ってしまいました。
したがって、「embed」タグが機能してなかったようです。

IEの場合は「object」を使用してる為問題なかったのですが、
スマートフォンでは「emmbed」を使用する為、表示出来なかった訳です。
試しに「Google Chrome」をインストールして確認したら、
やはりスマートフォン同様表示されません。

そこで、「embed」以降をスペースで区切るだけにして改行をなくしたところ、
スマートフォンでもうまく表示出来ました。

修正したコードが下になります。

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='480' height='290' id='single1' name='single1'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=Sample.mp4&backcolor=FFFFFF&frontcolor=000000&lightcolor=000000&screencolor=000000'>
<embed type='application/x-shockwave-flash' id='single2' name='single2' src='player.swf' width='480' height='290' bgcolor='undefined' allowscriptaccess='always' allowfullscreen='true' wmode='transparent' flashvars='file=Sample.mp4&backcolor=FFFFFF&frontcolor=000000&lightcolor=000000&screencolor=000000'/>
</object>




YOUTUBEの動画埋め込みはスマートフォンで見えてたので、
YOUTUBEに投稿すれば問題はないのですが、
記事との関連がない状態で公開しても意味がない物もありますからね。


とりあえず「JW player」を使っているページは全て修正しました。
まだ動画を埋め込んだ全てのページが確認出来た訳ではないですが、
確認したページでは「IE8」、「IE9」、「Google Chrome」、「Xperia GX」
では問題なく見れてます。

関連記事

スポンサードリンク



web拍手 by FC2

スポンサードリンク


[ 2012/11/30 23:46 ] ソフト関係 | TB(0) | CM(2)

今高速でよく使われているプラウザMozilla Firefoxでは確認されましたか?
私も自分のブログがIEとMozilla Firefoxで動くか確認しています。ブロガーはIEかMozilla Firefoxのどちらかを使っている人が多いからです。これは余談ですがブログのYOUTUBEの動画の再生時の画面サイズが変更になっていますね!
[ 2012/12/01 23:29 ] [ 編集 ]

Re: タイトルなし

purotokoさん
コメントありがとうございます

> 今高速でよく使われているプラウザMozilla Firefoxでは確認されましたか?

まだ、Mozilla Firefoxでは確認してません。
明日インストールして確認してみます。
[ 2012/12/02 20:17 ] [ 編集 ]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL