브라이트코브 비디오 플레이어: 미들웨어

JESS R의 사진
JESS R
블로그 플레이스홀더 이미지

미들웨어는 버전 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 그리고 setCurrentTimecurrentTime 는 현재 시간을 알고 싶을 때 호출됩니다. 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 블로그에 게시되었습니다.

브라이트코브는 한 진단 장비 제조업체가 수업 시간과 비용을 줄이면서 성공을 개선할 수 있도록 지원했습니다.
브라이트코브는 가장 유명한 자동차 시장에서 방대한 레거시 비디오 라이브러리를 관리하고 수익을 창출할 수 있도록 지원합니다....
브랜드 무결성을 유지하기 위해 리테일 브랜드는 색상, 글꼴 등을 조정할 수 있는 맞춤형 동영상 플레이어가 필요합니다.

시작할 준비가 되셨나요?

브라이트코브로 영상 마케팅 성과와 ROI를 높이는 방법을 알아보세요. 지금 문의하시면 자세히 상담해드립니다.