html5のvideoタグで動画を設定して表示されない
html5のvideoタグで動画を設定して表示されない
html5からvideoタグがサポートされ、動画をhtml5の記載だけで表示できるようになりました。
という事で、html5 videoタグで動画の表示設定をしました。
しかし、MicrosoftのEdgeでのみ表示され、IE11、Firefox、Chromeでは表示されないという現象に。
結論としては、動画の容量を3M以下にしたら、全てのブラウザで表示する事ができました。
しかしその結論を見つけるまでかなり手こずりました。容量が大きすぎると表示できないとは、どんなに調べまくってもでてこなかったので、 この原因記載はココが初かも？？原因解明まで行った事は、、、
1つ目・・ブラウザによってサポートしているファイル形式が違う為、3つのファイル形式を順番に読み込ませる
動画ファイルを3つのファイル形式（mp4、webm、ogv）に変換して、３つともサーバーへアップロード。
下記のように3つのファイル形式を順番に読み込ませるように記載 ダメでした。
<video>
<source src=”video/samplevideo.mp4″ />
<source src=”video/samplevideo.webm” />
<source src=”video/samplevideo.ogv” />
</video>
MicrosoftのEdgeでのみ表示され、IE11、Firefox、Chromeでは表示されないという現象は変わらず。
そもそも2017現在、古いものを除いてほぼ全てのブラウザがmp4形式に対応したという事で、mp4のみの記載でよいはず。
ブラウザのバージョンが古いのかと思ってFirefoxのバージョンを確認してみたが最新バージョンだったし。
ちょっと話がそれますが、サポートファイル形式がブラウザによってマチマチなのは、videoタグの特許の関係でいろいろあったようです。 どこかとどこかが巨額のライセンス料を支払ったというような記事をみかけたのですが、興味深かったのでご紹介したかったのですが 再度探すも見つからず。
さて2つ目・・うまく再生されないときは、サーバー側の設定が必要になる場合がある
という事で、.htaccess（ドットエイチーアクセス）に下記のようにAddTypeを記載し、そのvideoタグをサーバーのこのファイルを使う階層へへアップロード
AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm
ダメでした。
3つ目・・ではjavascriptで実装しようか？
でいくつかサンプルコードを見てみたが、同じだろうなと思って見送り。
4つ目・・容量を疑ってみる
ローカルで試した場合、MicrosoftのEdge、IE11、Firefox、Chromeで全滅だったので、極端に短い動画で試したらMicrosoftのEdgeでのみ再生。
でもしや、と思い容量を変更して試してみる事にしました。3.4Mの容量だった動画をさらに圧縮して1.4Mに。
結果すべてのブラウザで再生可能になった。（忘れていたが、オペラブラウザでも再生を確認）
ローカルでないインターネット上で確認してもOK！
で、原因ではなかった変更を下記のように元に戻しましたが、問題なく、Edge、IE11、Firefox、Chrome、Operaで動画は再生できました。2.4Mのファイルも試したところ再生。
（元に戻した設定は..
・webmとogv形式のビデオファイルをサーバーから削除
・コードを下記のようにmp4だけにしてサーバーへアップロード上書き
<video> <source src=”video/samplevideo.mp4″ /> </video>
・AddTypeを記載した.htcaccessをサーバーから削除
余計だった設定を消し確認。再生問題なし。）
★補足 safariで再生できていなかった事に気づきました。
QuicTimeをインストールしていろいろ試しましたが、結論としては再生できず、下記の情報にたどりつきました。
——^Safariに関しては、調べていると「最新版のSafariには対応しています。」という言葉を見るのですが、WindowsのSafariはバージョンアップが進んでいないため、再生されませんのでご注意ください。——–
ソース：http://webfeelfree.com/html5-video-basis/ —————-
safariにはMac向け以外とは別にWindows版というのがあるようです。という事で残念ですが、
代替の画像を追加で設定。
★補足 上記にあげているコードは静的HPでの表記例です。WordpressではファイルまでのパスをWordpressのテンプレートタグを使って指定する必要がります。
★モバイルでは基本、自動再生がモバイルのOS自体で禁止されている事や、ユーザビリティから考えて、動画の自動ダウンロード自体よくないので、プログラムの条件判定でモバイルには画像を指定します。
