미들웨어는 버전 6.0에서 Video.js에 추가되는 멋진 새 기능 중 하나입니다.
미들웨어를 사용하면 이제 플레이어와 기술이 상호 작용하고 서로 대화하는 방식을 변경할 수 있습니다. 기술은 플레이어에서 Video.js를 추상화한 것으로, 플레이어 API와 재생 기술을 분리합니다. 기술을 사용하면 외부 API나 플레이어의 모양과 느낌을 변경하지 않고도 플래시 폴백이나 유튜브 임베드와 같은 기능을 Video.js에 플러그인할 수 있습니다.
Video.js 미들웨어는 Express 미들웨어와 비슷하지만 라우팅은 비디오 MIME 유형을 기반으로 합니다.
많은 Video.js 사용자는 Express와 같은 프로젝트의 미들웨어에 익숙할 것입니다. Video.js 미들웨어도 이와 크게 다르지 않습니다. 두 경우 모두 특정 경로에 대해 미들웨어를 등록하여 경로가 트리거될 때 체인을 호출합니다. Express에서 경로는 URL 경로를 기반으로 합니다. Video.js에서 이러한 경로는 비디오 MIME 유형을 기반으로 합니다. 그리고 Express와 마찬가지로 "별"(*
) 모든 경로와 일치하는 미들웨어.
미들웨어에 대해 알아야 할 두 가지 중요한 사항이 있습니다:
- 동적 소스 처리
- 플레이어와 기술 상호작용 가로채기
비디오 카탈로그
동적 소스 처리 기능을 사용하면 사용자 지정 유형과 소스로 비디오를 로드하고 비동기적으로 해결할 수 있습니다. 이에 대한 좋은 예는 비디오 카탈로그 시스템입니다. 다음과 같이 특정 카탈로그 ID와 특수 MIME 유형으로 페이지를 렌더링할 수 있습니다:
<video controls class="video-js">
<source src="123" type="video/my-catalog">
</video>
그런 다음 해당 경로에 대한 미들웨어를 등록할 수 있습니다. video/my-catalog
.
// middleware methods get the player instance as an argument
videojs.use('video/my-catalog', function(player) {
// middleware are expected to return an object with the methods on it.
// It can be a plain object or an instance of something.
return {
// setSource allows you to tell Video.js whether you're going to be handling the source or not
setSource(srcObj, next) {
const id = srcObj.src;
videojs.xhr({
uri: '/getVideo?id=' + id
}, function(err, res, body) {
// pass null as the first argument to say everything is going fine and we can handle it.
next(null, {
src: body.sourceUrl,
type: body.sourceType
})
});
}
};
});
그런 다음 Video.js가 초기화될 때 다음을 위해 설정된 미들웨어를 호출합니다. video/my-catalog
.
서버 측 광고 삽입
서버 측 광고 삽입(SSAI)은 미들웨어에 매우 적합합니다. 이는 플레이와 기술 상호 작용을 가로채는 기능을 보여줍니다. 예를 들어 HLS 매니페스트에 30초 광고와 5분짜리 동영상이 있다고 가정해 보겠습니다. 타임라인에 광고 시간과 콘텐츠 시간이 각각 재생될 때 적절하게 표시되기를 원합니다. 현재 표시되는 기간은 5분 30초의 합산된 시간입니다(5:30
). 해결책은 광고가 재생되는 시점을 파악하여 플레이어에게 광고 재생 시간은 30초, 콘텐츠가 재생되는 시간은 5분이라고 알려주는 미들웨어를 추가하는 것입니다.
// register a star-middleware because HLS has two mimetypes
videojs.use('*', function(player) {
return {
setSource(srcObj, next) {
const type = srcObj.type;
if (type !== 'application/x-mpegurl' && type !== 'application/vnd.apple.mpegurl') {
// call next with an error to signal you cannot handle the source
next(new Error('Source is not an HLS source'));
} else {
// in here we know we're playing back an HLS source.
// We don't want to do anything special for it, so, pass along the source along with a null.
next(null, srcObj);
}
},
// this method gets called on the tech and then up the middleware chain providing the values as you go along
duration(durationFromTech) {
if (areWeCurrentlyPlayingAnAd(durationFromTech)) {
// since we're now in an ad, return the ad duration
// in a real example you'd calculate this based on your playlist
// rather than hardcode a value in here
return 30;
} else {
// we're playing back content, so, return that duration
return 5 * 60;
}
}
}
});
재생률 조정 - 사례 연구
간단하지만 흥미로운 미들웨어로 재생 속도 조절기를 살펴볼 수 있습니다. 이 미들웨어는 현재 재생 속도에 따라 컨트롤의 시간을 변경합니다. 예를 들어 20분짜리 동영상을 재생 중인데 재생률을 2배속으로 변경하면 컨트롤이 10분을 표시하도록 조정됩니다. 코드를 살펴보겠습니다.
videojs.use('*', function(player) {
/* ... */
return {
setSource(srcObj, next) {
next(null, srcObj);
},
duration(dur) {
return dur / player.playbackRate();
},
/* ... */
};
});
따라서 여기서는 MIME 유형에 관계없이 모든 동영상에 적용하기 위해 스타 미들웨어를 첨부합니다. In setSource
를 호출하여 next
와 직접 null
및 srcObj
모든 소스에 이 미들웨어를 사용하고자 하기 때문입니다. 또한 duration
메서드를 사용하여 이전 미들웨어에서 기간을 가져와서 플레이어에서 얻은 재생 속도로 나눕니다.
를 보면 코드 기간 옆에 다른 메서드를 볼 수 있습니다. 타이밍에 의존하는 다른 메서드가 업데이트되도록 하기 위한 것입니다. 주목해야 할 두 가지 메서드는 다음과 같습니다. currentTime
그리고 setCurrentTime
. currentTime
는 현재 시간을 알고 싶을 때 호출됩니다. setCurrentTime
는 검색할 때 호출됩니다. 사용자가 바뀐 시간에서 찾고 있으므로 변경 연산을 반대로 적용하고 싶습니다. 나누기 대신 곱하기를 원합니다.
currentTime(ct) {
return ct / player.playbackRate();
},
setCurrentTime(ct) {
return ct * player.playbackRate();
},
지금까지 수행한 작업을 적용하면 아무것도 변경되지 않고 컨트롤 막대에 여전히 20분의 지속 시간이 표시되는 것을 알 수 있습니다. 이는 Video.js가 알고 있는 한 아무것도 변경되지 않았기 때문입니다. 따라서 Video.js에 지속 시간이 변경되었음을 알려야 합니다. 소스 선택이 완료된 후 Video.js가 제공하는 기술을 저장하여 이를 수행할 수 있습니다.
videojs.use('*', function(player) {
let tech;
return {
setTech(newTech) {
tech = newTech;
}
/* ... */
};
});
그리고 나서 ratechange
이벤트가 트리거되면 Video.js에 지속 시간이 변경되었음을 알리고 Video.js가 그에 따라 컨트롤을 업데이트합니다:
videojs.use('*', function(player) {
let tech;
player.on('ratechange', function() {
tech.trigger('durationchange');
tech.trigger('timeupdate');
});
return {
/* ... */
}
});
이 글은 원래 Video.js 블로그에 게시되었습니다.