jPlayer で簡単に動画再生
http://jplayer.org/latest/quick-start-guide/
を参考に
http://jplayer.org/download/
からjPlayer本体とskinをダウンロード・設置
<head> <link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "fugafuga", m4v: "movie/hogehoge.mp4", poster: "image/hogehoge.png" }); }, swfPath: "/js", supplied: "m4v, ogv" }); }); </script> </head> <body> <div id="jp_container_1" class="jp-video "> <div class="jp-type-single"> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div class="jp-gui"> <div class="jp-video-play"> <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> </div> <div class="jp-interface"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-current-time"></div> <div class="jp-duration"></div> <div class="jp-controls-holder"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> </ul> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li> <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> </ul> </div> <div class="jp-details"> <ul> <li><span class="jp-title"></span></li> </ul> </div> </div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div> </body>
対応フォーマットは 以下
mp3 音声 mp3
m4a 音声 aac, mp4
oga 音声 oga
webma 音声 webma
wav 音声 wav
m4v 動画 m4v ※H.264
ogv 動画 ogv
webmv 動画 webmv
poster 画像 ポスター画像
参照 http://phpjavascriptroom.com/?t=strm&p=jplayer
script内のm4aやパスを適宜変えてください。
