html5media [HTML5] [plug-in] [js]

2016/08に公開

IE6/7/8でもHTML5のvideoタグとaudioタグを利用できるようにするjsプラグインです。
似たようなプラグインにaudioを古いIEで使えるようにするaudio.jsやAudio5js、audioとvideo両方を使えるようにするjplayerといったものがあります。
しかし、これらは以前はちゃんと古いIEでも動作していたのですが、最近確認したところ、動作しなくなってしまいました（jplayerのvideoの方は大丈夫みたいです）。
html5mediaはvideoタグとaudioタグ両方とも動作するようなので、ここではこのプラグインをご紹介します。

sample（audio）

IE7/8でも動作します。

サウンドはNANO-SOUNDさんから拝借しました。ご使用の際は利用規約をご一読ください。

html

html5mediaを読み込むだけでaudioタグ（サイト内リンク）がIE7/8でも使えるようになります。

/* 〜省略〜 */
<head>
/* 〜省略〜 */
<script src="//api.html5media.info/1.2.1/html5media.min.js"></script>
</head>

<body>
<audio src="サウンドファイルのパス" preload="auto" controls></audio>
</body>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 4行目：html5mediaを読み込む。読み込む場所はheadタグに限らない。
    jsファイルはダウンロードせず、apiを利用して良い。1.1.8はバージョンを表す。この数字は提供元サイトでは更新されている可能性がある。
  2. 8行目：通常どおりaudioタグを使ってサウンドファイルを貼り付ける。autoplay、loop、controlsといった属性を指定すれば、IE7/8でも反映されます。

audioタグに対応していないブラウザでは、コントローラーはflowplayerというjsプラグインのものが自動的に適用されます。

sample（video）

IE7/8でも動作します。

動画はGrahame Kelaherさんの作品です。個人商用利用無料動画を提供しているMazwaiからダウンロードし、OnlineVideoConverterやConvertioでファイルサイズやフォーマットを変更しています。

html

html5mediaを読み込むだけでvideoタグ（サイト内リンク）がIE7/8でも使えるようになります。

/* 〜省略〜 */
<head>
/* 〜省略〜 */
<script src="//api.html5media.info/1.2.1/html5media.min.js"></script>
</head>

<body>
<video src="動画ファイルのパス" controls></video>
</body>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 4行目：html5mediaを読み込む。読み込む場所はheadタグに限らない。
    jsファイルはダウンロードせず、apiを利用して良い。1.1.8はバージョンを表す。この数字は提供元サイトでは更新されている可能性がある。
  2. 8行目：通常どおりvideoタグを使って動画ファイルを貼り付ける。autoplay、loop、controlsといった属性を指定すれば、IE7/8でも反映されます。

videoタグに対応していないブラウザでは、コントローラーはflowplayerというjsプラグインのものが自動的に適用されます。

戻る

Top