여러 방식의 동영상 서비스 컨트롤하기

웹에서 동영상을 올리는 방식은 다양하다. local에 직접 올릴 수도 있고 다른 스트리밍 및 동영상 서비스를 통해 올릴 수도 있고 클라우드 서비스를 사용할 수도 있다.

그리고 직접 개발을 할 때에는 이런 경우 중 몇 개를 선택해서 서비스를 진행할 것이다. 이렇게 여러 방식의 동영상을 하나의 플레이어로 컨트롤할 수 있어야 할 텐데 이 때 사용하기 적합한 라이브러리가 있다.

Embed Player

Embed Player 간단히 여러 방식의 동영상을 하나의 플레이어로 사용할 수 있다.

예시

<iframe src="https://player.vimeo.com/video/1084537?api=1" id="embed"
	width="640" height="360" frameborder="0" allowfullscreen></iframe>

$('#embed').on('embedplayer:statechange', function (event) {
	console.log('state:', event.state);
}).on('embedplayer:error', function (event) {
	console.error('error:', event.error);
}).on('embedplayer:durationchange', function (event) {
	console.log('duration:', event.duration);
}).on('embedplayer:volumechange', function (event) {
	console.log('volume:', event.volume);
}).on('embedplayer:timeupdate', function (event) {
	console.log('currentTime:', event.currentTime);
}).on('embedplayer:ready', function (event) {
	console.log('link:', $(this).embedplayer('link'));
}).embedplayer('listen'); // enable all events

$('#embed').embedplayer('play');
$('#embed').embedplayer('seek',30);
$('#embed').embedplayer('volume',0.5);
$('#embed').embedplayer('pause');
$('#embed').embedplayer('stop');

이런 식으로 사용한다.

Reference

embedplayer

Written on August 14, 2017