IE8でも、HTMLにmp4を埋め込みたい
YouTubeの動画を<iframe>
で埋め込むのではなく、自前のサーバにアップロードした動画を埋め込む方法です。
IE8は<video>
タグに対応していないので、何らかの対処が必要です。
が、<embed>
タグを使うことで簡単に解決します。
MediaElement.jsなどのJavaScriptライブラリは、必要なかったんですね。
何時間浪費してしまったのか…。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <video type="video/mp4" src="001.mp4" width="400" height="240" controls> <!-- IE8 --> <embed type="video/mp4" src="001.mp4" width="400" height="240" autoplay="false"> </video> </body> </html>
余談: さくらサーバでアクセス制限された
ともかく問題は解決したので、さくらサーバ(スタンダード)にHTMLをアップロードして動作を確認しようとしたところ、503エラーが発生しました。
動画のページだけでなくドメイン全体で、ページを表示することができません。
さくらサーバのサポート情報では、以下のような記述があります。
503 Service Temporarily Unavailable
[原因と対処]
- 一時的にウェブアクセスが集中している
- お客様のCGIプログラムが誤作動を起こしている
- アクセス転送量が多い
[制限]
運営(設置)されているコンテンツによりサーバに過負荷が発生した場合、弊社にてコンテンツへの【制限】を実施する場合があります。
制限につきましては、「サーバコントロールパネル」の「リソース情報」から確認できます。
あっ…。
アクセス転送量が多い
に、心当たりがあります。
動画のファイルサイズが、645MBなんです。
たった3分15秒の動画なのに (^ ^;)
「サーバコントロールパネル」の「リソース情報」を確認したところ、動画を設置した日付から503が頻発しています。
やっぱり…。
他の方の経験談の記事も見つかりました。
そりゃ、そうですよね…。
幸い、私の上司が電話でさくらサーバへ問い合わせて、アクセス制限は解除してもらえました。
今後の対処としては、動画のファイルサイズを数MB、せめて十数MBにまで小さくするか、YouTubeの動画を埋め込むか、のどちらかですね。
これまではアマチュアの個人としてサイトを制作してきたので、動画を埋め込んだり、巨大なファイルを扱うことがなく、それにまつわるトラブルを今回初めて経験しました。
戸惑いと緊張で疲れてしまいましたが、良い経験になりました (-人-)
そして、さくらサーバ様、ご迷惑をおかけしました m(_ _;)m