雨過天晴

動画の埋め込み…が簡単じゃなかった件

2014.02.02

WordPressで動画

img from: ふわふわ。り

この記事は2014年2月2日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。

どうも。当ブログ、また引っ越ししました。
どうでもいい記事を削除(いや残った記事もどちらかといえばどうでもいいんですが。元々のJUGEMブログが残ってるので、そっちにデータ置いときゃいいかと)、カテゴリを整理。
すっきりしたところでもうちょっと娘の話も書いてみようか、そういえば「自転車乗れたぞっ」ていう動画があるな、いっちょ貼ってみるか。
□_ヾ(・_・ )サクサクサク…(作業中)。

貼れねぇー(´ー`)アレレー

…という備忘録です。

先に結論を言ってしまうと、

1.動画のファイル形式を対応している形式にする
2.メディア追加でアップ、本文中に挿入
3.おしまい

という簡単さ!なのに色々やらかしてエラーまみれ…。さ、ひとつずつ反省しますよ!


エラーが三連チャンで泣きそうでした(目次)。

動画の貼り付けって、投稿画面の「メディア追加」でアップするだけっちゃうの?
ところが、そうではなかったのです。
(すいません本気で動画のことはわからない人間が書いてます。
 ご存じの方にとっては『こんなんプーだぜプー』な内容です)

エラーその1:『セキュリティ上この形式のメディアはアップできません』

「メディアを追加」でアップしようとしたところ、さらっと出てきたこのエラー。
うん?
ダンナ携帯から送られてきた動画、拡張子が3gpというものでした。
詳細はよく分からないながらも(ワタシ、動画のフォーマットにはびっくりするくらい詳しくないよ☆)、アップロードできないかどうか調べてみる。

ほうほう。つまり、function.phpに3gpも動画だぜぃ読みやがれ!と書き込むわけですな。
…しかしこれはwp-includes内のfunction.php。
もしかしてアップグレードのときに書き換えられるんじゃあ…あ、やはり書き換えられますね。

困ったので更に調べる調べる。

あったあった!テーマ内のfunction.phpに書き込む方法!

エラーその2:『(アップロード用の)フォルダを作成できません』

アップロードはできかけました。しかしこのエラー。
「親ディレクトリのアクセス権はサーバーによる書き込みを許可していますか?」
…されてんじゃね?しらんけど。
パーミッション確認したけど大丈夫そうなので更に首を傾げる。
一瞬の勇気を出して777にしてみたけどやっぱ駄目(ってか777なんてことしちゃ駄目)。

更にググってみると→「メディアファイルのアップロード先を変更するとエラーが出る」
あ!!!!! 変えてたわ!!!! こないだすっげ手間かけて変えてたわ!!!

というわけで自分のせいでした。
アップロード先を変更するのはいったん諦めて、デフォルトに戻します。
で解決解決。
無事アップロード完了。
(アップ先フォルダ変更したのは、画像に直リンクされたときに/wp-content/uploads/って出るのが嫌だったため)

エラーその3:『添付ファイル扱いになる』

アップロードは出来た。
投稿に追加もできた。
しかし、添付ファイル扱いになる。

ええと、記事内にurlが出てダウンロードリンクになります。
しかもクリックするとエラー画面に飛ぶ。

動画の扱いに関しては皆様、youtube画像を埋め込むプラグインとか使われてるようです。
つまり、動画ファイルは何らかのプレーヤーを通さないとただのファイル添付になる、ってことで合ってますかね?

でも娘が自転車漕いでるだけの世界にとってはどうでもいい動画をいちいちyoutubeとかvimeoに上げる気にはならぬのですよ。

ぐーぐる先生によると世の中にはMediaElement.jsというプレーヤー?があるらしい。
中身はどうやらhtml5でvideoタグでという…ああ避けに避けていた分野だ…
(繰り返しますが本当に昔っから動画のことは苦手で)
(勉強から逃げてはいけないという実例ですよ)

で、これにはWordPress用のプラグインもあるらしい。
…うーん(プラグイン使用すると足抜けが難しいので出来れば避けたい)。

とりあえず、最初からそんな予感はあったものの、ファイル形式3gpのままだとどうにもならなさげなのでまずコンバーター探してきました。(macだと何使えばよいか判らず今回はMedia Converterです)。

そうそう、html5で動画でvideoタグでファイル形式があれでブラウザ対応が、な話はこちらを拝見しました。

h.264形式にしたかったのですが、unknownエラーで止まったためWebMで今回はアップ。
※2014年2月4日、下方に追記しました

どれどれ、とWebM形式で「メディア追加」したところ、WordPressさんってばさっくりと埋め込み扱いにしてくれた…!
メディア追加画面右下「埋め込みまたはリンク」選択にようやく現れた「メディアプレーヤーを埋め込み」に歓喜!!!

プラグインいらないんですね?よくわからんけどまあいいや!

今日のところはこれで満足しておきます。iOS非対応やけど。
……そう、この形式だと自分のiPhoneからは見られないんです。困ったね。


<2014年2月5日 追記>
オンラインで動画ファイルをコンバートできるサイトはないかと探していてようやく知ったのですが、h.264形式の拡張子は(主に)mp4になるのですね。
お恥ずかしながら、実はずっとコーデックと拡張子は一対一対応(例:mpeg4ならmp4、mp4なら必ずmpeg4)だと思っておりました。

そうか違うのか。

こちらで有りがたく3gp(携帯撮影での動画)からmp4(iOs用)に変換して、ようやくPCでもiPhoneでも見られるようにできました。

こんな感じ。(これは豆まき)