HOME > WEB > MovableTypeにmediaplayer設置
つぶやく
MovableTypeにmediaplayer設置

サブドメで作ってるMTでは実家閲覧用の息子ブログを運営中している我が家。
そっちでは動画もたまにアップするんだけど、スマホにちゃんと対応させてなかったからやってみようかと。

いろいろググってみたんだけど、残念ながらFlash使わない方法がいまいち好みのものが見つからなかったから、Flash使用のmediaplayerを採用。
iOSで見れないのはしょうがない。。。

JW FLV Media Player の古いバージョンを発見したからそれを使うことに。

準備として以下3ファイルをアップ。
 swfobject-2.2.js
 mediaplayer.swf
 logo.png
3つ目のロゴは自分で作ったやつw再生時との兼ね合いを考えたりしてあんまり綺麗にできないなぁ。。。

でもって、スマホ用とPC用で大きさ変えるため、ヘッダーにサイズを入れる。

【PC用】
『グローバルテンプレート』の <head> 内

<script type="text/javascript">
var mp_w = '480';
var mp_h = '320';
</script>

【スマホ用】
『tmpl/mt4i/header.tmpl』の <head> 内
画面サイズを取得して値を2段階に変更。

<script type="text/javascript">
var screen_w = screen.width;
if (screen_w < 480){
var mp_w = 240;
var mp_h = 180;
}else{
var mp_w = 320;
var mp_h = 240;
}
</script>

これで準備完了note
あとは動画とサムネイル画像をアップした後でブログ投稿時にソース貼り付け。

 

 

<!-- 動画ここから -->
<script type='text/javascript' src='/js/mediaplayer/swfobject-2.2.js'></script>
<div id="players110713"><a get="" the="" flash="" player="" href="http://www.adobe.com/go/gntray_dl_getflashplayer_jp">Get the Flash Player(JavaScriptおよびFlash非対応の場合は見れません)</a></div>
<script type="text/javascript">
var flashvars = {
'file': '/mov/110713.flv',
'image': '/mov/110713.jpg',
'logo': '/js/mediaplayer/logo.png'
};
var params = {
'allowfullscreen': 'true',
'allowscriptaccess': 'always'
};
swfobject.embedSWF('/js/mediaplayer/mediaplayer.swf', 'players110713', mp_w, mp_h , '9', 'false', flashvars, params);
</script>
<!-- 動画ここまで -->

変更箇所は4か所。
 div の id と swfobject の2つ目の引数を新しく、同じ値に。(日付とか使って他の動画とかぶらないように)
 flashvars の file と image をそれぞれアップした動画とサムネイル画像へのパスに。

実際はこんな感じに。

 


※こないだ浅草行ったときに見つけた動く看板(?)
※決して山田うどんのまわしものではありませんww

んー、これで動画投稿もいつでもできるなー。
手順がそんなに簡単ではないけどwww
 

 

1件のコメント

  • 動画再生ソフトPowerDVD 11体験レビュー

    [E:movie]私は洋楽が好きで最新チャートを常にチェックしていますが、気にな

コメントを残す



このページのトップへ