브라이트코브 플레이어 샘플: 탐색 시간 얻기

플레이어 예제

당신이 seekbar를 클릭하면 플레이어 아래에 표시되는 클릭 한 시간을 볼 수 있습니다.

펜보기찾는 시간 얻기게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

미들웨어 함수

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

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

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

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

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

   videojs.use ( 'mimeType', functionName);

   에 대한 MIME 유형표준 비디오 MIME 유형을 사용할 수 있습니다. 비디오 / mp4 , 또는 *미들웨어 기능이 모든 MIME 유형에서 작동하도록하려면.

플레이어/HTML 구성

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

플레이어 구성

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

기타 HTML

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

응용 프로그램 흐름

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

• 미들웨어 함수에 대한 기본 구문을 구현하고 함수 이름을 지정합니다. getSeekedTime .
• 변경 setCurrentTime ()단순히 검색된 시간을 반환하는 메서드입니다.

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

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

// +++ 미들웨어 함수 정의 +++

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

var getSeekedTime = function (player) {
  반환 {
  ...
};

setCurrentTime () 메소드를 변경

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

// ### setCurrentTime 메소드에서 탐색 시간 설정 ###

이 코드 블록은 실제 setCurrentTime ()방법이 변경됩니다. 이것을 이해하기 위해 알아야 할 첫 번째 요점은 ct함수에 전달 된 값은 뷰어가 스크러빙하는 값을 반영합니다. 따라서 적절한 변수에 값을 할당하고이 값을 반환하면 setCurrentTime ()여전히 올바르게 작동합니다.

setCurrentTime : function setCurrentTime (ct) {
  시크 바리크 타임 = CT;
  반환 ct;
}

응용 프로그램 스타일 지정

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

미들웨어 함수 사용

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

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

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

<비디오 JS ID = “마이 레이어 ID”
  데이터-비디오 ID="5701202551001"
  데이터 계정 = “1752604059001"
  data-player = "기본값"
  데이터 포함 = “기본값”
  데이터 애플리케이션 ID=""
  컨트롤="">< /비디오-js>

<div id = "displayTimesHere"> </ div>

<스크립트 src=” https://players.brightcove.net/1752604059001/default_default/index.min.js “> < /스크립트 >

<스크립트 유형 = “텍스트/자바 스크립트” >
  var seekBarClickedTime;

  // +++ 미들웨어 함수 정의 +++
  var getSeekedTime = function (player) {
    반환 {
    // +++ setCurrentTime 메소드에서 탐색 시간 설정 +++
      setCurrentTime : function setCurrentTime (ct) {
        시크 바리크 타임 = CT;
        반환 ct;
      }
    }
  };

  // 플레이어에 미들웨어 등록
  videojs.use ( '*', getSeekedTime);

  // 검색 바에서 mouseup 이벤트 초기화
  videojs.getPlayer ( 'myPlayerID'). ready (function () {
    var myPlayer = this;
    myPlayer.controlBar.progressControl.seekBar.on ( 'mouseup', function (event) {
      displayTimesHere.innerHTML + = seekBarClickedTime + '<br>';
    });
  });
  </ script>

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

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

<비디오 JS ID = “마이 레이어 ID”
  데이터-비디오 ID="5701202551001"
  데이터 계정 = “1752604059001"
  data-player = "기본값"
  데이터 포함 = “기본값”
  데이터 애플리케이션 ID=""
  컨트롤="">< /동영상>
<스크립트 src=” https://players.brightcove.net/1752604059001/default_default/index.min.js “> < /스크립트 >

<script src = "get-seeked-time.js"> </ script>

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