初めに
vimeo API で発火（登録）したイベントを確認したくて、簡単に表示できる方法を探した。
video.jsの場合
videoJSのonメソッドは配列を渡せるらしく、下記のような記述が可能だそうだ。
video.js
video.on(['loadstart', 'loadedmetadata', 'loadeddata', 'play', 'playing', 'pause', 'suspend', 'seeking', 'seeked', 'waiting', 'canplay', 'canplaythrough', 'ratechange', 'ended', 'emptied', 'error', 'abort'], (e) => {
console.log(`EVENT: ${e.type}`);
});
Parameters
| name | Type | Required | Description |
|---|---|---|---|
| first | String or Component | yes | The event type or other component |
| second | function or String | yes | The event handler or event type |
| third | function | yes | The event handler |
vimeoの場合
vimeoのonメソッドは…
on(event: string, callback: function): void
残念、文字列型しか渡せないようです。
実装
イベントはcuechangeを除きHTML5のvideoで使われるものと同じそうなので、該当のイベントを配列にして出力することで解決した。
//You can listen for events in the player by attaching a callback using .on():
player.on('eventName', function(data) {
// data is an object containing properties specific to that event
});
//The events are equivalent to the HTML5 video events (except for cuechange, which is slightly different).
//To remove a listener, call .off() with the callback function:
vimeo.js
var items = [ 'audioprocess', 'canplay', 'canplaythrough', 'complete', 'durationchange', 'emptied', 'ended', 'loadeddata', 'loadedmetadata',
'pause', 'play', 'playing', 'progress', 'seeked', 'ratechange', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting' ];
items.forEach(function(value) {
player.on(value, function() {
console.log(value);
});
});