Vueで、Vimeoのプレイヤーを埋め込む方法

Vimeoプレイヤーのインストール

$ npm install -D @vimeo/player

.vueファイル

<template>
    <iframe
        src="https://player.vimeo.com/video/vimeoid"
        width="640"
        height="360"
        frameborder="0"
        allowfullscreen
    ></iframe>
</template>

※vimeid部分は任意で指定

<script>
import Player from "@vimeo/player";

export default {
    mounted: function() {
        var iframe = document.querySelector("iframe");
        var player = new Player(iframe);

        player.on("play", function() {
            console.log("Played the video");
        });

        player.on("ended", function() {
            console.log("Ended the video");
        });

        player.getVideoTitle().then(function(title) {
            console.log("title:", title);
        });
    }
};
</script>

モジュールのインポート

import Player from "@vimeo/player";

Vimeoプレイヤーへのアクセス
<iframe>タグからSDK経由でプレイヤーを取得する

var iframe = document.querySelector("iframe");
var player = new Player(iframe);

イベントの設定とメソッド実行

player.on("play", function() {
    console.log("Played the video");
});

player.on("ended", function() {
    console.log("Ended the video");
});

player.getVideoTitle().then(function(title) {
    console.log("title:", title);
});