videoタグ

      2017/02/06

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にしてエンコードしたところうまくいった、というケースもでてきたので追記しておく。
変換にはこれ使ったよ。

 - (X)HTML