MediaElement.jsを使ってみたメモ

http://mediaelementjs.com/

眠いのだけども、READMEのままやったらはまったので素っ気なくメモを。


1.
githubからcloneするとbuildディレクトリの下にjs, cssとかあるので、その中から以下のファイルをpublicなところにコピー

  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • mediaelementplayer.css
  • controls.png


2.

        <script src="jquery.js"></script>
        <script src="mediaelement-and-player.min.js"></script>
        <link rel="stylesheet" href="mediaelementplayer.css" />


3.
audio/videoタグを書く際に必ずidを振っておく

 <audio id='audioplayer-123' src="/uploads/hogehoge.mp3" controls ></audio>


4.
JavaScriptでプレイヤーを有効にする。その際、MediaElementPlayerをnewするようにして、jQuery記法でのid文字列を渡してあげる。

<script type="text/javascript">
$(function() {
// $('audio').mediaelementplayer();  <==こっちだとエラーに
  $('audio').each(function() {
    new MediaElementPlayer('#' + this.id);
  });
});
</script>