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

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

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

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

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

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

このページの目次

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」というテキストエディタがおすすめです。

HTML・CSS用のテキストエディタならMeryがおすすめ！5つの理由とは？｜ミライヨッチ
https://miraiyotch.com/text-editor-mery/
HTML・CSSなどのコーディングは、メモ帳だと少し不便に感じることもあると思います。そんなときは、もっと使いやすいエディタを探してみると良いかもしれません。僕の場合だと、コーディング向けのエディタとして「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です。

フリーのFTPソフトはFileZillaがオススメ！優れている5つの理由とは？｜ミライヨッチ
https://miraiyotch.com/filezilla/
サーバーにファイルを転送するとき、FTPソフトって必要ですよね。いろんなフリーのFTPソフトの中でも、僕は圧倒的に「FileZilla」をオススメしています。この記事では、FTPソフトの中でもFileZillaが特に …