JavaScript

JW PlayerでWebページにmp4動画を簡単に埋め込む方法 – javascript

webページに動画を埋め込む方法はいくつかあります。

videoタグ、youtubeなどの動画共有サービスなどを使う方法です。
しかし、videoタグはスマートフォンでは対応していない場合があり動画再生に難があります。
youtubeなどの動画共有サービスは動画が削除される危険性や会員専用サイトには不向きです。

そこで、webページにmp4動画を簡単に埋め込めるJW Playerを紹介します。

JW Playerは僕が確認したブラウザですべて動き、スマートフォンでもサクサク問題なく動きました。

スマートフォンでは文字リンクで動画URLにアクセスさせる作りが多いですが、JW Playerを使えばyoutubeを埋め込んだ感じでwebページを作成できます。

任意のキャプチャー画像の表示、動画の再生/停止、全画面表示などそろっています。
シークバーもあるので任意の場所から再生できます。

特にスマートフォンサイトに導入してもらいたいjavascriptプログラムです。

JW Playerのダウンロード

ユーザー登録

JWPlayer:https://www.jwplayer.com/

①SIGN UP FOR FREE のボタンをクリックしてアカウント登録します。

①メールアドレスを入力。
②GET JW PLAYER FREE ボタンを押すとSign Inのメールが届きます。

①パスワードを設定する一時的なURLが記載されているのでパスワードを設定しましょう。

①パスワード入力
②確認用パスワード入力
③ボタンクリックでパスワード設定完了

①個人名を入力
②企業名を入力
③職種を入力
④全て入力後ボタンクリックでJWPlayerの管理画面へ移動します

①~③の入力内容は適当で構いません。

これでアカウントの登録が完了です。

JWPlayerダウンロード

①登録したメールアドレスとパスワードで管理画面にサインインします

①ツールメーニューへ移動
②license keyをコピーして保存、後述で使います
③JWPlayerをダウンロードしZIPファイルを解凍します

JW Playerの使い方

解凍したJWPlayerフォルダを任意の場所にアップロード。
<header>~</header>の間に下記を記述する。

<script src="JWPlayerフォルダpath/jwplayer.js"></script>
<script>jwplayer.key="license key";</script>

プレイヤーの埋め込みは下記を記述

<div class="movie-wrap">
    <div id="sampleMovie">Loading the player…</div>

<script type='text/javascript'>
    jwplayer('sampleMovie').setup({
        file: '動画ファイルパス',
        image: "サムネイル用画像パス(再生前に表示される画像)",
        width: '540',//横幅
        height: '300'//横幅
    });
</script>

</div>

ページ内に複数動画を埋め込む場合は「id=sampleMovie」「jwplayer(‘sampleMovie’)」のsampleMovie部分を変更する必要があります。

まとめ

海外サイトへのアカウント登録になるので少し不安になりますが、
Gmailなどのフリーメールを使えば問題ありません。

記述内容も少ないので簡単に動画埋め込みが出来ると思います。

スマートフォンサイトに利用して他サイトには無い魅力を出してみてはどうでしょうか?

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です