より良い生活を送る為の情報サイト

The Good Life

*

The Good Life

- より良い生活を送る為に -

生活

WordPressでMP4などの動画をブログに埋め込むのはプラグインを使うよりvideoタグが簡単!

最近動画(mp4)をブログに埋め込む機会があったんですが、普段wordpressのプラグインに頼ってばっかの僕は、

動画をブログに埋め込みたい → なんかいいプラグインないかな?

というプラグイン任せの思考になっていました。

今回は初心に戻り、プラグインを使わないでブログに動画をブログに埋め込むことにしました!(プラグインではうまくいかなかった)

スポンサーリンク

videoタグでmp4動画を埋め込む

<video src="○○.mp4" controls="controls" width="100%" height="150"></video>

ビジュアルエディタに書いたら駄目ですよ!テキストエディタです!

src="○○.mp4"

この部分が動画ファイルを置いてある場所ですね。訳あって今は動画ファイルがありませんが、.mp4が動画の拡張子ですね。

controls="controls" width="100%" height="150"

この部分はcontrolsで再生ボタンやシークバーの表示をしています。そして、記事内で表示する動画の大きさをwidthで指定しています。

これで終わりです。簡単ですね!

追記:FireFoxで再生されない!

上の方法ではFireFoxで再生されませんでした。

調べた結果、ソースを以下のように書きなおしました。

<video controls" width="100%" height="240">
    <source src="○○.mp4" />
    <source src="○○.ogv" />
</video>

FireFox用にogv形式の動画もサーバーにアップロードしました。(訳あって今は動画ファイルがありません)

そして、.htaccessにも以下を追加しました。

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

これでFireFoxでも正常に動画が再生されるようになりました!

まとめ

videoタグはhtml5で有効なタグです。この記述の仕方では対応しないと、IE8などの一部のブラウザでは再生できません。

プラグインを使えばIE8などで見た時に、動画を自動的にフラッシュに置換することもできるようですが、もうさすがにIE8以下は切り捨てでいいでしょう。

また、プラグインを使えばショートコードで楽に埋め込めると色々なサイトで書いてありましたが、僕の環境ではうまく再生できませんした。

そもそも、ショートコードを使うまでもない簡単なコードですしね!(プラグインに頼ろうとしてたくせにw)

youtubeに動画をアップロードしなくても簡単に動画を貼り付ける事ができるので是非!

-生活