브라이트코브 플레이어 샘플: 앞으로 스크러빙 비활성화

플레이어 예제

처음에는 앞으로 스크럽 할 수 없지만 뒤로 스크럽 할 수 있습니다. 동영상이 50 % 재생되면 앞으로 또는 뒤로 스크럽 할 수 있습니다. 앞으로 스크러빙을 허용하는 비율은 코드에서 쉽게 설정할 수 있습니다.

펜보기정방향 스크러빙 비활성화게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

미들웨어 함수

이 샘플에서는 Video.js 미들웨어를 사용하여 코드 솔루션을 구현합니다. 매우 높은 수준에서 미들웨어가 가장 중요한 사용 사례는 소스 또는 현재 시간 설정과 같은 플레이어의 핵심 동작을 가로채고 변경하려는 경우입니다. 일반적으로 Video.js 미들웨어는 이 문서에서 길이에 대해 설명하지 않지만 미들웨어 기능에 사용되는 실제 코드에 대해 설명합니다. 다음은 세부 미들웨어를 수행하는 Video.js 소스의 문서입니다.

• 미들웨어 (Video.js 설명서 세트에서)
• 기능 스포트라이트: 미들웨어 (Video.js 블로그에서)
• 동영상 재생 속도 조절기 (샘플 앱)

브라이트코브 플레이어로 미들웨어 기능 구현

미들웨어 함수를 사용하는 가장 간단한 방법은 다음과 같습니다.

1. 미들웨어 함수를 작성하십시오.
2. 플레이어가있는 페이지에 미들웨어 기능을 배치합니다. script태그를 사용하거나 미들웨어 기능을src속성script꼬리표. 두 구현 모두 이 문서에 나와 있습니다.
3. 다음과 같이use()메서드를 사용하여 플레이어에 미들웨어 함수를 등록합니다.

   videojs.use('mimeType', functionName);

   MIME 타입의경우비디오/mp4와같은 표준 비디오 MIME 타입을 사용하거나 미들웨어 기능이 모든 MIME 타입에작동하도록하려면*를사용할 수 있습니다.

플레이어/HTML 구성

이 섹션에서는 플레이어 생성 시 필요한 특수 구성에 대해 자세히 설명합니다. 또한 페이지 내장 플레이어 구현 코드 이외에 페이지에 추가해야 하는 다른 HTML 요소에 대해서도 설명합니다.

플레이어 구성

이 샘플에 대해 만든 브라이트코브 플레이어에는 특별한 구성이 필요하지 않습니다.

기타 HTML

다른 HTML 요소는 페이지에 추가되지 않습니다.

응용 프로그램 흐름

이 응용 프로그램의 기본 논리는 다음과 같습니다.

• 미들웨어 함수에 대한 기본 구문을 구현하고 함수 이름을 지정합니다. disableForwardScrubbing .
• 필수 구현setSource()방법.
• 변경setCurrentTime()뷰어가 스크럽을 시도하는 시간이 플레이어의 현재 시간보다 작거나 앞으로 스크럽 비율이 경과했는지 확인하는 메서드입니다. 둘 중 하나에 해당하면 재생 헤드를 해당 시간으로 이동합니다. false이면 현재 시간에 비디오를 계속 재생합니다.

미들웨어 기능에 대한 스켈레톤 만들기

라벨이 붙은 코드를 찾으십시오:

// +++ Define the middleware function+++

다음과 같이 미들웨어 함수를 생성하기위한 기본 구문은 다음과 같습니다

var disableForwardScrubbing = function(player) {
  return {
  ...
};

player객체가 함수에 전달된다는 점에 유의하십시오.

구현setSource()방법

라벨이 붙은 코드를 찾으십시오:

// ### Implement setSource() ###

이것은 모든 미들웨어 기능에 필요한 방법입니다. 표시된 구문을 사용하면 비디오 유형에 관계없이 미들웨어가 항상 선택됩니다.

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

setCurrentTime () 메소드를 변경

라벨이 붙은 코드를 찾으십시오:

// ### Alter the setCurrentTime method ###

이 코드 블록은 실제setCurrentTime()방법이 변경됩니다. 이것을 이해하기 위해 알아야 할 첫 번째 요점은ct함수에 전달 된 값은 뷰어가 스크러빙하는 값을 반영합니다. 그만큼if문은 새 값이 플레이어의 현재 시간보다 작은 지 또는 앞으로 스크러빙을 허용하는 백분율을 초과하는지 확인합니다. 둘 중 하나가 참이면 새 값이 반환되어 재생 헤드가 새 값으로 이동합니다. 조건이 false (뷰어가 허용되기 전에 앞으로 스크럽을 시도 함을 의미 함) 인 경우 플레이어의 현재 시간이 반환되고 재생이 변경되지 않습니다.

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

응용 프로그램 스타일 지정

페이지의 CSS는 단순히 플레이어의 크기를 설정합니다.

미들웨어 함수 사용

미들웨어 함수가 작성되면 사용하려고합니다. 앞에서 언급한 두 가지 방법이 있으며 지금 자세히 설명 될 것입니다.

플레이어와 동일한 페이지의 코드

여기서 플레이어와 동일한 페이지에서 미들웨어 함수를 정의한 다음 등록합니다.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

플레이어 페이지에 포함된 코드

다음 코드에서 미들웨어 기능에 대한 JavaScript와use()등록 방법은 페이지에 포함되어 있습니다.

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

참조별도의 파일 기능전체 코드는 GitHub 저장소의 섹션을 참조하세요.