ishikawa@tam-tam.co.jp' ishikawa

VimeoのPlayer APIを使ってプレーヤーを操作する

VimeoのPlayer APIについて少し調べる機会がありましたので、使い方などをまとめてみます。

■目次

  1. 基本的な埋め込み
  2. メソッド
  3. イベント
  4. オプション
  5. 複数配置した場合

1. 基本的な埋め込み

まずは、HTMLにPlayer APIを読み込む記述を追加します。
今回はjQueryで記述するので、合わせてjQueryも読み込んでおきます。

■HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

次にプレーヤーを操作する記述を追加していきますが、VimeoのPlayer APIを使用する方法がいくつかありますので、それぞれ紹介していきます。

1-1. HTMLにプレーヤーのタグを埋め込んでおく方法

HTML内にプレーヤーのタグ(iframe)を直接埋め込んで、そのプレーヤーをそのままPlayer APIで操作します。
今回はJavaScriptで指定しやすいように、iframeにid="sample"を追加しておきます。

■HTML

<iframe id="sample" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

プレーヤーを操作するための記述を追加します。
今回はプレーヤー再生時にconsoleを表示するようにしてみます。

■JavaScript

$(function() {
    var player = new Vimeo.Player($('#sample'));

    // プレーヤー再生時にconsole表示
    player.on('play', function() {
        console.log('再生');
    });
});

これでプレーヤー再生時にconsoleが表示されるようになりました。
サンプルページ

ちなみに今回はjQueryで記述するようにしていますが、jQueryを使わなくても記述可能です。
jQueryを使わない場合は以下のようになります。

■JavaScript

var player = new Vimeo.Player('sample');

// プレーヤー再生時にconsole表示
player.on('play', function() {
    console.log('再生');
});

サンプルページ

1-2. JavaScriptで指定して埋め込む方法

HTML内にidを指定した空のdivを配置して、そのdiv内にJavaScriptでプレーヤーのタグ(iframe)を埋め込みます。

■HTML

<div id="sample"></div>

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871, // VimeoのID
        width: 640 // プレーヤーの幅
    };

    var player = new Vimeo.Player($('#sample'), options);

    // プレーヤー再生時にconsole表示
    player.on('play', function() {
        console.log('再生');
    });
});

サンプルページ

上記ではVimeoのIDで動画を指定しましたが、VimeoのURLでも指定することができます。

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        url: 'https://vimeo.com/76979871' // VimeoのURL
    };

    var player = new Vimeo.Player($('#sample'), options);

    // プレーヤー再生時にconsole表示
    player.on('play', function() {
        console.log('再生');
    });
});

サンプルページ

1-3. data属性を指定して埋め込む方法

Vimeoを埋め込む空divにdata属性を追加して、プレーヤーのタグ(iframe)を埋め込みます。

■HTML

<div id="sample" data-vimeo-id="76979871"></div>

■JavaScript

$(function() {
    var player = new Vimeo.Player($('#sample'));

    // プレーヤー再生時にconsole表示
    player.on('play', function() {
        console.log('再生');
    });
});

サンプルページ

JavaScriptで指定して埋め込んだ時と同じように、IDではなくURLで指定することもできます。

■HTML

<div id="sample" data-vimeo-url="https://vimeo.com/76979871" data-vimeo-width="640"></div>

サンプルページ

2. メソッド

2-1. プレーヤーの操作

再生や一時停止、シークバーの移動、音量調整などを操作してみます。

■HTML

<div id="sample"></div>
<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="prev">10秒前へ</button>
<button id="next">10秒先へ</button>
<button id="volup">音量アップ</button>
<button id="voldown">音量ダウン</button>
<button id="mute">ミュート</button>

今回はplay()のメソッド以外では省略していますが、各メソッドでエラーが発生していないかを調べる場合、catch()を使用します。

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871 // VimeoのID
    };

    var player = new Vimeo.Player($('#sample'), options);

    // 再生
    $('#play').on('click', function() {
        player.play().then(function() {
            console.log('再生');
        }).catch(function(error) {
            console.log(error);
        });
    });

    // 一時停止
    $('#pause').on('click', function() {
        player.pause().then(function() {
            console.log('一時停止');
        });
    });

    // 10秒前へ
    $('#prev').on('click', function() {
        // 現在の秒数を取得
        player.getCurrentTime().then(function(seconds) {
            console.log('現在の秒数:', seconds);

            // 10秒前に戻す
            player.setCurrentTime(seconds - 10).then(function(seconds) {
                console.log('変更後の秒数:', seconds);
            });
        });
    });

    // 10秒先へ
    $('#next').on('click', function() {
        // 現在の秒数を取得
        player.getCurrentTime().then(function(seconds) {
            console.log('現在の秒数:', seconds);

            // 10秒先に進める
            player.setCurrentTime(seconds + 10).then(function(seconds) {
                console.log('変更後の秒数:', seconds);
            });
        });
    });

    // 音量アップ
    $('#volup').on('click', function() {
        // 現在の音量を取得
        player.getVolume().then(function(volume) {
            console.log('現在の音量:', volume);

            // 音量を0.1アップする
            player.setVolume(volume + 0.1).then(function(volume) {
                console.log('変更後の音量:', volume);
            });
        });
    });

    // 音量ダウン
    $('#voldown').on('click', function() {
        // 現在の音量を取得
        player.getVolume().then(function(volume) {
            console.log('現在の音量:', volume);

            // 音量を0.1ダウンする
            player.setVolume(volume - 0.1).then(function(volume) {
                console.log('変更後の音量:', volume);
            });
        });
    });

    // ミュート
    $('#mute').on('click', function() {
        player.setVolume(0);
    });
});

サンプルページ

2-2. 動画情報の取得

動画の長さやタイトルなどの情報を取得して、consoleに表示してみます。

■HTML

<div id="sample"></div>

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871 // VimeoのID
    };

    var player = new Vimeo.Player($('#sample'), options);

    // 動画の長さ
    player.getDuration().then(function(duration) {
        console.log('動画の長さ;', duration);
    });

    // 動画のタイトル
    player.getVideoTitle().then(function(title) {
        console.log('動画のタイトル;', title);
    });

    // 動画のID
    player.getVideoId().then(function(id) {
        console.log('動画のID;', id);
    });

    // 動画のURL
    player.getVideoUrl().then(function(url) {
        console.log('動画のURL;', url);
    });

    // 動画の字幕情報
    player.getTextTracks().then(function(tracks) {
        console.log('動画の字幕情報', tracks);
    });
});

サンプルページ

3. イベント

プレーヤー読み込み時や再生時に発火するイベントを試してみます。

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871 // VimeoのID
    };

    var player = new Vimeo.Player($('#sample'), options);

    // 読み込み
    player.on('loaded', function(data) {
        console.log('読み込み', data);
    });

    // 再生した時
    player.on('play', function(data) {
        console.log('再生', data);
    });

    // 一時停止した時
    player.on('pause', function(data) {
        console.log('一時停止', data);
    });

    // 最後まで再生した時
    player.on('ended', function(data) {
        console.log('再生終了', data);
    });

    // シークした時
    player.on('seeked', function(data) {
        console.log('シーク', data);
    });
});

サンプルページ

4. オプション

オプションでは自動再生やループ、プレーヤーの表示の設定などが行えます。

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871, // VimeoのID
        autoplay: true, // 自動再生
        loop: true, // ループ
        color: 'ff0000', // プレーヤーのカラー
        byline: false, // 投稿者部分の表示
        portrait: false, // 左上のVimeoのマークの表示
        title: false // タイトルの表示
    };

    var player = new Vimeo.Player($('#sample'), options);
});

サンプルページ

data属性で指定することもできます。

■HTML

<div id="sample" data-vimeo-id="76979871" data-vimeo-autoplay="true" data-vimeo-loop="true" data-vimeo-color="ff0000" data-vimeo-byline="false" data-vimeo-portrait="false" data-vimeo-title="false"></div>

■JavaScript

$(function() {
    var player = new Vimeo.Player($('#sample'));
});

サンプルページ

5. 複数配置した場合

Vimeoのプレーヤーを複数配置した場合、デフォルトで同時再生を防止するようになっています。

■HTML

<div id="sample"></div>
<div id="sample2"></div>

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871 // VimeoのID
    };
    var options2 = {
        id: 59777392 // VimeoのID
    };

    var player = new Vimeo.Player($('#sample'), options);
    var player2 = new Vimeo.Player($('#sample2'), options2);
});

サンプルページ

同時再生するかどうかは、オプションのautopauseで設定できます。
autopauseをfalseにすることで、同時再生するようになります。

■JavaScript

$(function() {
    // プレーヤーのオプション設定
    var options = {
        id: 76979871, // VimeoのID
        autopause: false // 同時再生するかどうか
    };
    var options2 = {
        id: 59777392, // VimeoのID
        autopause: false // 同時再生するかどうか
    };

    var player = new Vimeo.Player($('#sample'), options);
    var player2 = new Vimeo.Player($('#sample2'), options2);
});

サンプルページ

他にも色々な設定ができますので、詳しくは公式のドキュメントをご確認ください。

【参考サイト】

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら

Recommend

jadeのテンプレートを触ってみた
CSSやJavaScriptで画像の保存を防止する方法4種類

CSSやJavaScriptで画像の保存を防止する方法4種類

レスポンシブのサイトでスマホの時だけtelリンクを有効にする
jQueryでフォーム入力をチェックする

jQueryでフォーム入力をチェックする