【WordPress】埋め込みメディアの挿入/編集について


media_button←このボタン、
TinyMCE Advancedの『埋め込みメディア挿入/編集』のボタンです。
超気になります。
多分、Wordpress3.xから実装されているんじゃないかと思ったのですけど、気にも止めていませんでした(汗)

 まず、どんな種類の動画が埋め込みが可能か?というところですが

media

プルダウンしてみると

  • media_dig.video
  • media_dig.audio
  • media_dig.flash
  • media_dig.quicktime
  • media_dig.shockwave
  • media_dig.windowsmedia
  • media_dig.realmedia
  • media_dig.iframe

 という。8つの項目が出てきます。

・media_dig.flash⇒*.flv 
・media_dig.quicktime⇒*mov 
・media_dig.shockwave⇒*.swf 
・media_dig.windowsmedia⇒*.wmv、*.asf、*.avi
・media_dig.realmedia⇒*.rm、*.rmvb
・media_dig.iframe⇒外部メディア挿入(YOUTUBE等、多分ニコ動はダメだと思う)

というのはなんとなく解る気がします。

・media_dig.video
・media_dig.audio

なんだっけ…これ???

…ということで、謎が一つ解けました。
HTML5のタグに

HTMLクイックリファレンス 様
★HTML5タグリファレンス
<video> …… 動画を再生する
http://www.htmq.com/html5/video.shtml
<audio> …… 音声を再生する
http://www.htmq.com/html5/audio.shtml

さっそくテストアップしてみることに。

まずはaudioのほうから*.mp3をアップ。

まずはOKでしょう。(FireFox、InternetExplorer、GoogleChrome、Safari)OperaはNGでした。

videoのほうはどうでしょ?*.mp4形式の動画をアップしてみる。


祝!ウレロ☆未体験少女放送記念

 …おお、*.mp4が再生されたじゃないですか!!!(動作はFireFox、GoogleChrome、Safari、InternetExplorer)
しかーし、またしてもOperaで表示されず。
なんでだろ?バージョンは最新にしてるはずなんだけどなー。

…*.mp4については、ファイルが重いのもあるので、サイトで使用するということを考えると、あんまり選択肢には入らないかなーと思います。

でも、今までサポートされていなかった動画ファイルがページ上で表示されるというのはいいですね。
これからもいろいろと使えそうです。

 

【実験】いろんな形式の動画をTinyMCE Advancedを使ってあげてみる


TinyMCE Advancedので、動画が自分のサーバーに入れてビジュアルエディタを使って動画を表示する、というすばらしー機能があるので、今回はテストとしてやってみたいことがあります。
(ソース書き込みメンドクサイですもんね(←ぉ)

いろんな形式の動画をアップしよう!

しかーし、いろいろ実験しようと思って動画をせっせと作っていましたが

出力した動画はどれも表示されず…(涙)

うーん、プルダウンで選択した種類とファイルタイプのミスマッチか?

ちなみに、以前入手していた手元にあるダウンロードしたflvファイルは再生される。

設定は
埋め込みメディア挿入/編集
media_dig.flash ⇒.flvファイル(相対、もしくはフルパス、どちらもOK)

たとえば、YOUTUBEやDairyMotionからバックアップを取っていたflvファイルはきちんと再生されます。
(これはあくまでも実験です)

こんな感じに。

上品芸人っすな。またゴッドタンではっちゃけてくれる姿を楽しみにしております。

そかー、YOUTUBEにアップしてから、バックアップ取っていれば再生されるはず。

というわけで…
YOUTUBEを使ってみたけれど、再生されなーい(涙

なんでだろ…orz

ちなみに、GomENCORDERの無料版にてflvファイル作成すると
(無料版なので、右上にロゴが出ています)

及川光博の大和証券のCMです。(青バージョン)

\とまりん!/     \とまりん!/

半沢直樹終了後に各CMに半沢直樹キャラが登場しまくってますが、これは見紛うばかりの『渡真利忍』じゃないですか!
ミッチーはアートネイチャーのシャンプーのCMに出たのでノーマークでしたが、大和証券がやってくれましたね!

あ、そうそう。動画の話でした。

おそらくGomENCORDERだとサーバーに合うファイルを出力してくれるみたいです。
買おうかなぁ…(ぇ

【追記】2013.12.22

YOUTUBEからアップして12時間ほど経ってからバックアップを取るとflvファイルは表示されます。
なるほどー。

渡真利忍CMその2(赤(オレンジ?)バージョン)です。及川光博というより、本当に渡真利忍だなー。

\とまりん!/\とまりん!/

 

【WordPress Plugin】TinyMCE Advanced


Blogを今風にしたい!その2

今どきのブログを書くページに絵文字を入れたり、ボタン一つで画像URLや動画URLが貼られたり出来るパネルがあったりします。
WordPressの場合はビジュアルエディタを使う時に、ちょいと味気ない感じがします。
なんというか、色味がないというか。

そういった色付け的なモノを導入するPlugin

TinyMCE Advanced
http://wordpress.org/plugins/tinymce-advanced/

ビジュアルエディタのほうで

こんなことや

表とか 作れちゃったりして
   


動画(↑これはQuick Time動画です)をYOUTUBEとかからではなくて、自分のサーバーに入れたものを表示させたりしちゃったり

今回使用した動画と同じものはこちら

ホンダ アコードのイギリス版のCM
http://www.youtube.com/watch?v=azlvB5CauNU

この動画を今回Quick Time動画で自分のサーバでアップしております。
(実はホンダ公式チャンネルでアップロードされるより、ずいぶん前からこの動画を何故か入手していて、しかも*.mov形式動画だったという不思議…)

これで、アレな動画とかアップ出来ますよね(ぉい

なんか、多分レンタルブログでは出来ないようなこともできちゃったり…。

 便利ですね。

*********

今回お世話になったサイト様

WordPressの使い方を覚えたい 様
ビジュアルエディタを高度にカスタマイズする、プラグイン「TinyMCE Advanced」
http://crossinthenight.com/wordpress/1127/

「TinyMCE Advanced」をカスタマイズする
http://crossinthenight.com/wordpress/2057/

 TinyMCE Advanced日本語化ファイル

Lovelog 様 TinyMCE
Advanced3.9.9.2 日本語版配布
http://lovelog.eternal-tears.com/wordpress/wp-plugin-ja/tinymce-advanced3392-ja/

*********

日本語化にはちょっとした細工が必要になるようです。

これで、もうちょっと凝った感じの記事が書けるかな…?