【WordPress】アップロードした動画を独自のプレイヤーで再生する方法

ヨッチヨッチ

こんにちは!サイト運用メンターのヨッチです。

WordPressにアップロードした動画って、ブラウザのプレイヤーで再生されますよね。

ブラウザのプレイヤーでも問題ないんですけど、おしゃれなデザインにしたいときもあると思います。
さらには、YouTubeみたいに倍速再生もできると便利ですよね。

実はすっごく簡単な方法で、独自プレイヤーを実装できるんです。
しかも、ソースコードをコピペするだけで使えます。

というわけで、WordPressの動画をどうやって独自プレイヤーで再生するのか?
ここからくわしく解説していきます!

WordPressにアップロードした動画を独自プレイヤーで再生する方法

まずは、サクッと結論からお伝えしますね。

Video.js」というライブラリを使えば、WordPressに独自プレイヤーを実装できます。

Video.js

しかもCDNという機能に対応しているので、JavascriptやCSSをアップロードしなくてもOKです。

HTMLのソースコードをコピペして、メモ帳でちょっと編集するだけです。
なので、やろうと思えば1分で導入できますよ。

ソースコードの編集について

では、以下のソースコードをコピペしてメモ帳に貼り付けましょう!

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
	<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
	<!-- Video.js base CSS --><link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet" />
	<!-- City --><link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">
	<!-- Fantasy --><link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">
	<!-- Forest --><link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">
	<!-- Sea --><link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet">
</head>
<body>
	<video id="my-video" class="video-js vjs-theme-city" controls preload="auto" width="720" height="480" poster="poster.jpg" data-setup='{ "aspectRatio":"720:480", "playbackRates": [1, 1.5, 2, 3], "playsinline": true }'>
	<source src="MY_VIDEO.mp4" type="video/mp4" />
	<p class="vjs-no-js">このビデオを表示するには、JavaScriptを有効にして、<a href="https://videojs.com/html5-video-support/" target="_blank">HTML5ビデオをサポートするWebブラウザ</a>へアップグレードしてください。</p>
	</video>
	<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>

デフォルトのメモ帳が使いづらいときは、「Mery」というテキストエディタがおすすめです。

編集が必要なのは、12,13行目です。

	<video id="my-video" class="video-js vjs-theme-city" controls preload="auto" width="720" height="480" poster="poster.jpg" data-setup='{ "aspectRatio":"720:480", "playbackRates": [1, 1.5, 2, 3], "playsinline": true }'>
	<source src="MY_VIDEO.mp4" type="video/mp4" />

12行目の変更点

12行目では、以下の2か所を変更します。

width="720" height="480
"aspectRatio":"720:480"

どちらも動画の解像度を指定しています。
あなたがアップロードした動画にあわせて、数値を変更しましょう。

13行目の変更点

13行目では、あなたがアップロードした動画のファイル名を入力します。

	<source src="MY_VIDEO.mp4" type="video/mp4" />

ここまで変更できたら、文字コードは「UTF-8」でHTMLファイルとして保存します。
例としては、「test.html」などの名前で保存しましょう。

これでHTMLファイルが作成できました!
あとは動画ファイルとポスター画像を用意して、サーバーにアップするだけです。

ポスター画像とは、いわゆる動画のサムネイルですね。
動画と同じ解像度にしておけば、きれいに表示されますよ。

HTMLファイル・動画・ポスター画像をアップロードする

HTMLファイル・動画・ポスター画像を用意したら、以下のような構成でフォルダに保存しましょう。

test/
├── test.html
├── MY_VIDEO.mp4
└── poster.jpg

すべて同じ階層に保存することで、スムーズに読み込むことができます。

最後に、この「test」ファルダをFTPソフトでサーバーにアップロードしましょう!
FTPソフトが使えないときは、レンタルサーバーのファイルマネージャーでもOKです。

フォルダをアップしてから、「test.html」のURLをブラウザで開くとプレイヤーが表示されます。

プレイヤーが表示された

【おまけ】追加機能について

ちなみに、今回のソースコードにはデザイン変更・倍速再生の機能もついています。

プレイヤーのデザイン変更

デザイン変更するには、12行目のClassを編集します。

class="video-js vjs-theme-city"

「vjs-theme-city」を、あなたの変更したいデザイン用CSSに書き換えます。
以下のClassに対応しているので、好きなデザインで使ってみましょう!

vjs-theme-city
都会的なイメージ
vjs-theme-fantasy
幻想的なイメージ
vjs-theme-forest
森林のようなイメージ
vjs-theme-sea
海のようなイメージ
「class="video-js"」のみ
シンプルなデザイン

倍速再生の設定

倍速再生の設定は、12行目にある以下のコードです。

"playbackRates": [1, 1.5, 2, 3]

「playbackRates」で指定した数字の速度で、動画を再生できます。

今回は「1,1.5,2,3」を指定しているので、これらの速度に変更可能です。
0.5などの数値を入れれば、再生速度を遅くする項目も追加できます。

【まとめ】ソースコードをコピペするだけで動画プレイヤーを実装できる

ここまで「Video.js」を使用して、WordPressに独自プレイヤーを実装する方法を紹介してきました。

CDNに対応しているので、とにかく導入が簡単です。
シンプルなHTMLファイルとポスター画像さえ用意すれば、すぐ使うことができます。

もしポスター画像がなければ、「poster="poster.jpg"」の記述を削除してもOKです。
その場合は、スマホでは真っ黒な画面が表示されるみたいです。

あなたの好みにあわせて、着せ替えできるデザインもいくつか用意されています。
倍速再生も設定できて、本当に使いやすいプレイヤーだと思います。

サイトに動画をアップロードしたときは、独自プレイヤーで快適に再生してみませんか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。

ワードプレスの構築や運用、気になることがあれば、お気軽にご相談くださいね。
ウェブサイトを活用した集客・販売や、WEBマーケティングのコンサルも行っています。

サイト構築・運用について相談する