HTML5のVIDEOとのAUDIOを簡単に!1つのファイルを任意のブラウザで開いても同じUIをコンセプトにしております。
ワードプレスにはプラグインがあるのでとても簡単ですね。
⇒MediaElement.js
このmediaelement.jsはjqueryのプラグインですが設置は結構簡単です。
だけど再生されない。。。。なぜだろう。。と調べてみたら
.htaccessに記述したらうまくいきましたので乗せておきます。
スポンサーリンク
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm |
上記追加でOKでした。
ワードプレスで使わない場合はjQueryとmediaelementを読み込んでcssを読み込んで設定サンプルのようにすればOK
下記は設定サンプル
<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="myvideo.mp4" /> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="myvideo.webm" /> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="myvideo.ogv" /> <!-- Optional: Add subtitles for each language --> <track kind="subtitles" src="subtitles.srt" srclang="en" /> <!-- Optional: Add chapters --> <track kind="chapters" src="chapters.srt" srclang="en" /> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&file=myvideo.mp4" /> <!-- Image as a last resort --> </object> </video> |
オプションはこんな感じ
$('video').mediaelementplayer({ // if the <video width> is not specified, this is the default defaultVideoWidth: 480, // if the <video height> is not specified, this is the default defaultVideoHeight: 270, // if set, overrides <video width> videoWidth: -1, // if set, overrides <video height> videoHeight: -1, // width of audio player audioWidth: 400, // height of audio player audioHeight: 30, // initial volume when the player starts startVolume: 0.8, // useful for <audio> player loops loop: false, // enables Flash and Silverlight to resize to content size enableAutosize: true, // the order of controls you want on the control bar (and other plugins below) features: ['playpause','progress','current','duration','tracks','volume','fullscreen'], // Hide controls when playing and mouse is not over the video alwaysShowControls: false, // force iPad's native controls iPadUseNativeControls: false, // force iPhone's native controls iPhoneUseNativeControls: false, // force Android's native controls AndroidUseNativeControls: false, // forces the hour marker (##:00:00) alwaysShowHours: false, // show framecount in timecode (##:00:00:00) showTimecodeFrameCount: false, // used when showTimecodeFrameCount is set to true framesPerSecond: 25, // turns keyboard support on and off for this instance enableKeyboard: true, // when this player starts, it will pause other players pauseOtherPlayers: true, // array of keyboard commands keyActions: [] }); |