すたらブログ

文系Webプログラマの備忘録

IE8でも、HTMLにmp4を埋め込みたい

HTML

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