Video.js를 한동안 사용했다면 플러그인의 개념, 즉 자신이 만든 플레이어의 메서드가 되는 함수에 익숙할 것입니다. Video.js 플러그인에 익숙하지 않다면 종합적인 플러그인 가이드를 참조하세요.

기본 플러그인이라고부르는 이 플러그인은 가볍고 플레이어를 완벽하게 제어할 수 있습니다. 이는 매우 유용하며 앞으로도 변하지 않을 것입니다.

하지만 더 다양한 기능을 원한다면 어떻게 해야 할까요? 아니면 플러그인을 구성하는 방법에 대한 더 많은 지침이 필요하신가요? 아니면 복잡한 플러그인이 많은 플레이어를 관리하는 데 도움이 되는 더 많은 도구가 필요하신가요?

Video.js 6.0 이전에는 사용자가 직접 해결해야 했습니다.

고급 플러그인 소개

Video.js의 강점 중 하나는 풍부한 플러그인 에코시스템입니다. 그래서 지난 몇 달 동안 저희는 플러그인 작성자 환경을 개선하는 데 집중하고자 했습니다.

플러그인 생성기와 같은 프로젝트를 통해 그 어느 때보다 쉽게 플러그인 작성자가 될 수 있지만, Video.js 팀은 Video.js 플러그인의 미래를 구축할 수 있는 기본 API와 규칙 세트를 제공하는 것이 중요하다고 생각했습니다.

저희의 솔루션은 고급 플러그인입니다.

고급 플러그인은 컴포넌트와 유사합니다.

고급 플러그인의 설계 목표 중 하나는 기존 컴포넌트 시스템을 연상시키는 API를 제공하는 것이었습니다. 여러 가지 방법으로 이를 달성했습니다.

가장 낮은 수준에서는 플러그인 등록 기능의 이름이 다음과 같이 변경되었습니다. videojs.plugin 에 videojs.registerPlugin (에서 네이밍 단서를 가져옴) videojs.registerComponent 그리고 videojs.registerTech).

고급 플러그인은 단순한 등록 방법 이름 변경 외에도 클래스 기반입니다. 고급 플러그인의 간단한 예는 다음과 같습니다:

var Plugin = videojs.getPlugin('plugin');

var HelloWorld = videojs.extend(Plugin, {
  constructor(player) {
    Plugin.call(this, player);
    this.player.addClass('hello-world');
  }
});

videojs.registerPlugin('helloWorld', HelloWorld);

 

ES6 트랜스파일러를 사용하는 경우 비슷한 방식으로 ES6 클래스를 사용할 수 있습니다.

이 플러그인은 기본 플러그인과 동일한 방식으로, 즉 등록된 플러그인 이름과 일치하는 플레이어 메서드를 통해 초기화할 수 있습니다.

고급 플러그인의 경우 이 메서드는 플러그인 클래스를 인스턴스화하고 인스턴스를 반환하는 팩토리 함수입니다.

생성되는 플레이어 메서드는 항상 함수가 된다는 점을 알아두면 유용합니다. 플레이어에 이미 고급 플러그인의 인스턴스가 있는 경우 관련 메서드는 다시 초기화하지 않고 기존 인스턴스를 반환하기만 하면 됩니다:

var player = videojs('my-player');
var instance = player.helloWorld();

// Logs: 'true'
videojs.log(instance === player.helloWorld());

 

그리고 helloWorld 메서드는 이 플러그인 객체가 폐기될 때까지 이 플러그인 객체를 반환하고, 그 이후에는 새 플러그인 인스턴스를 다시 생성합니다.

이벤트 

컴포넌트와 마찬가지로 고급 플러그인은 다음을 통해 이벤트를 수신하고 트리거할 수 있습니다. on, one, off및 trigger 메서드.

이는 플러그인과 다른 객체(컴포넌트, 플레이어 등)가 자체 상태를 관리하고 서로의 상태 변화에 대응할 수 있도록 느슨하게 결합된 통신 채널을 제공합니다.

추가 이벤트 데이터

Video.js 이벤트 시스템을 사용하면 이벤트를 트리거할 때 두 번째 인수로 추가 데이터를 리스너에 전달할 수 있습니다(첫 번째 인수는 이벤트 객체 자체입니다).

플러그인 이벤트는 이 객체에 일관된 프로퍼티 집합을 전달합니다( trigger):

• instance: 이벤트를 트리거한 플러그인 인스턴스입니다.
• name: 문자열로 된 플러그인 이름(예 'helloWorld').
• plugin: 플러그인 클래스/생성자 함수 (예 HelloWorld).

예를 들어 플러그인의 이벤트 리스너는 다음과 같은 것을 기대할 수 있습니다:

var player = videojs('my-player');
var instance = player.helloWorld();

instance.on('some-custom-event', function(e, data) {
  videojs.log(data.instance === instance); // true
  videojs.log(data.name === 'helloWorld'); // true
  videojs.log(data.plugin === videojs.getPlugin('helloWorld')); // true
  videojs.log(data.foo); // "bar"
});

instance.trigger('some-custom-event', {foo: 'bar'});

 

라이프사이클

플러그인과 컴포넌트의 또 다른 유사점은 수명 주기, 더 구체적으로는 설치 및 제거 프로세스라는 개념입니다.

자바스크립트에서 일반적인 객체 생성의 부작용으로 설정 기능이 제공되지만, 객체 소멸과 객체 간 참조를 정리하여 메모리 누수를 방지하는 것은 사용자가 알아서 해야 하는 부분입니다.

Video.js 컴포넌트에는 오랫동안 dispose 메서드와 이벤트는 DOM과 메모리에서 컴포넌트를 제거하는 작업을 처리합니다. 고급 플러그인에도 동일한 기능이 있습니다:

var player = videojs('my-player');

var firstInstance = player.helloWorld();

// Logs: 'true'
videojs.log(firstInstance === player.helloWorld());

firstInstance.on('dispose', function() {
  videojs.log('disposing a helloWorld instance');
});

// Logs: 'disposing a helloWorld instance'
firstInstance.dispose();

var secondInstance = player.helloWorld(); 

// Logs: 'false'
videojs.log(firstInstance === secondInstance);

 

그리고 pluginsetup 이벤트

플러그인에는 컴포넌트에는 없는 한 가지 수명 주기 기능이 있습니다. pluginsetup 이벤트.

이 이벤트는 플러그인이 플레이어에서 초기화될 때 플레이어에서 트리거됩니다:

var player = videojs('my-player');

player.on('pluginsetup', function(e, hash) {
  if (hash.name === 'helloWorld') {
    videojs.log('A helloWorld instance was created!');
  }
});

// Logs: 'A helloWorld instance was created!'
player.helloWorld();

 

리액트에서 영감을 얻은 상태 풀러니스

고급 플러그인과 컴포넌트 모두를 위해 Video.js에 추가된 흥미로운 기능 중 하나는 React에서 영감을 얻은 상태 저장성입니다. 기본적으로 이는 모든 플러그인 객체와 컴포넌트 객체가 state 프로퍼티는 해당 객체의 변수 상태를 저장하는 데 사용할 수 있는 일반 객체입니다. 그런 다음 setState 메서드를 호출하여 이 객체를 업데이트하고 statechanged 이벤트.

이 시스템을 사용하면 플러그인과 컴포넌트가 이벤트 특성을 사용하여 일관된 API를 통해 인메모리 상태 변경 사항을 전달할 수 있습니다:

// A static property of the constructor can be used to pre-populate state 
// for all instances.
HelloWorld.defaultState = {color: 'red'};

var player = videojs('my-player');
var instance = player.helloWorld();

instance.on('statechanged', function(e) {
  var color = e.changes.color;

  if (color) {
    videojs.log('The helloWorld color changed from "' + color.from + '" to "' + color.from + '"!');
  }
});

// Logs: 'The helloWorld color changed from "red" to "blue"!'
instance.setState({color: 'blue'});

 

플레이어 플러그인 인식

마지막으로, 복잡한 플러그인 조합을 관리할 때 가장 치명적인 문제 중 하나인 플레이어가 어떤 플러그인을 초기화했는지 여부를 보고할 수 없다는 문제를 해결하지 않고는 새로운 플러그인 인프라를 추가할 수 없었습니다. 이를 위해 플레이어에는 두 가지 새로운 방법이 있습니다: hasPlugin 그리고 usingPlugin. 이러한 방법은 다음과 같은 경우에 작동합니다. 둘 다 플러그인 유형.

그리고 hasPlugin 방법

이 메서드는 주어진 이름과 일치하는 플러그인이 플레이어에서 사용 가능한지 여부를 보고합니다:

var player = videojs('my-player');

// Logs: 'true'
videojs.log(player.hasPlugin('helloWorld'));

// Logs: 'false'
videojs.log(player.hasPlugin('fooBar'));

 

이 방법은 플러그인이 초기화되었는지 여부는 무시하고 등록 여부만 보고합니다.

그리고 usingPlugin 방법

이 메서드는 플레이어에서 플러그인을 사용할 수 있는지 여부뿐만 아니라 현재 플레이어에서 플러그인이 활성화되어 있는지 여부도 보고합니다:

var player = videojs('my-player');

// Logs: 'false'
videojs.log(player.usingPlugin('helloWorld'));

player.helloWorld();

// Logs: 'true'
videojs.log(player.usingPlugin('helloWorld'));

 

한 가지 주의할 점은 이 기능은 두 가지 유형의 플러그인 모두에서 작동하지만 고급 플러그인만 이 값을 두 번 이상 변경할 수 있다는 것입니다. 기본 플러그인에는 수명 주기나 이벤트가 내장되어 있지 않으므로 플러그인이 "폐기"되었는지 여부를 확인할 수 없습니다.

Go Forth 및 코드

이러한 플러그인 아키텍처의 추가 및 개선 사항을 통해 Video.js 플러그인을 더 즐겁게 작성하고 플러그인이 메모리 누수 및 기타 문제를 일으키지 않도록 하는 데 필요한 저수준 작업을 일부 제거할 수 있기를 바랍니다.

고급 플러그인의 설계는 6.0이 성숙해지고 더 많은 커뮤니티 피드백을 받으면서 기능을 추가할 수 있도록 하기 위한 것입니다. 언제나 그렇듯이, 사용자들이 어떤 방식으로든 Video.js 프로젝트에 도움을 주실 것을 적극 권장합니다.

이 글은 원래 Video.js 블로그에 게시되었습니다.