webページにて制作した動画を再生させたいのだがブラウザだったりOSだったりでそれぞれに不具合がでるので
その調査兼覚書
まずはタグ
html5でのvideoタグは下記(ただし今回はブラウザに対応できず最終的に使ってないので参考程度に…)
<video src="movie/動画.mp4" preload="none" poster="img/サムネイル.jpg" onclick="this.play();" controls > <div>動画を再生するには、videoタグをサポートしたブラウザが必要です。</div> </video>
preload=”none”は必須
poster属性 動画の説明画像などを表示できる(サムネイル画像の役割?)
controls属性 再生・一時停止・再生位置の移動・ボリュームなどのインターフェースを表示できる
preload属性 動画の再生をユーザーにまかせるときやウェブサーバに余分な負担を掛けたくない場合はnone(デフォルトはpreload="auto")
<video>タグがサポートされていない環境で表示させるメッセージを記述することができる
参考:HTML5リファレンス<video>タグで動画を埋め込む、videoタグの解説
<source src="movie/動画.ogv">で他動画形式のサポートもできるんだけどどれを優先にするかがむずかしい…。
(あっちのブラウザをたてればこっちのブラウザがたたず…みたいな)
ブラウザ別の表示結果
上記でそのまま各ブラウザで見た結果は以下の通り。
IEブラウザ
「動画を再生するには、videoタグをサポートしたブラウザが必要です。」が表示される
Firefox
動画を再生しようとすると
「この動画のファイル形式またはMIMEタイプはサポートされていません。」が表示される
ogvファイルが必要
Chrome
動画が再生される
Opera
サムネイル画像と動画インターフェースは表示されるが動画の再生がはじまらない
webmvファイルが必要
Safari
動画が再生される
iPhone4 safari
動画が再生される
android 標準ブラウザ
「ビデオの再生ができません このビデオは再生できません。」と表示される
Kindle 標準ブラウザ
「ビデオの再生ができません このビデオは再生できません。」と表示される
使い物にならん…
その後別サーバー(ここ)にあげたらkindleはみえるようになったけど…firefoxは相変わらず×
jQueryに頼る
なので何か動画関連のjqueryはないものかと探したところ、ありましたjPlayerが!!!
設置方法はjQueryプラグイン「jPlayer」の使い方を参考にして、jPlayer本体とスキンをダウンロードし、動画をアップしたところどのブラウザからも動画が再生できた。
ただしサンプル動画はを再生することはできたが自作の動画は再生できなかった・・・
動画の形式が何かオカシイ・・・
あと.htaccessが制御している場合もあるので
AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType audio/webm webma AddType audio/wav wav AddType video/mp4 mp4 AddType video/mp4 m4v AddType video/ogg ogv AddType video/webm webm AddType video/webm webmv
を.htaccessに追加するとうまくいく場合もある。(私はこれを設定したことによりFirefoxでも動画を読み込んでくれるようになった)
まとめ
必要な動画ファイルは
●mp4(Chrome、safari、IE11用)
●ogv(Firefox用)
●webmv(Opera用)
jPlayerを利用し、上記のファイルを読み込む(フォーマット指定はsupplied: "webmv,ogv,m4v",の順推奨/左が優先的に表示される)
再生されない場合は.htaccessの設定をする
これでとりあえずChrome、Firefox、iPhoneブラウザ(safari)、Kindle標準ブラウザ、Operaで動画(音声有)の再生が確認できた。
追記
動画のエンコードが問題の場合があるので形式をいろいろ変えてみるのもひとつの手。
mp4をアップしたらIE11では見れない、なんて最近表示されたので(「無効なファイルです」とか「エラー:ビデオタイプがサポートされていない、またはファイルパスが無効です」とか)、プロファイルをHTML5にしてエンコードしたところうまくいった、というケースもでてきたので追記しておく。
変換にはこれ使ったよ。