플레이어 개발자 기본 사항: 사용자 정의 플러그인 - 코드 변환

이 항목에서는 Brightcove Player를 제어하는 코드를 사용자 지정 플러그인으로 변환하는 방법을 알아 봅니다.
 

단계

이 단계에서는 단일 HTML 페이지에서 Brightcove Player를 향상시키는 코드를 작성했다고 가정합니다.

  1. JavaScript 및 CSS에 대한 빈 파일을 만듭니다. 모범 사례로서 파일 이름은 플러그인의 기능을 반영해야합니다. 비디오에서 back-forward-buttons.js과 back-forward-buttons.css사용됩니다.
  2. HTML 페이지에서 CSS를 복사하고<style>태그를 지정하고 전용 CSS 파일에 붙여 넣습니다.
  3. HTML 페이지에서 JavaScript를 복사하고<script>태그를 지정하고 전용 JavaScript 파일에 붙여 넣습니다.
  4. JavaScript 파일에서 다음과 유사한 코드를 찾습니다. 
    videojs.getPlayer('myPlayerID').ready(function () {
    기능을 반영하는 플러그인의 이름을 선택하여 다음으로 바꿉니다. 
    videojs.registerPlugin('backForwardButtons', function() {
  5. 원본 HTML 페이지에서<style>차단하고 CSS 파일에 대한 링크로 바꿉니다. 
    <link href="back-forward-buttons.css" rel="stylesheet">
  6. 원본 HTML 페이지에서<script>플레이어의index.min.js파일, 두 번째 추가<script>플러그인의 자바 스크립트에 링크 할 태그 : 
    <script src="back-forward-buttons.js"></script>
  7. 원본 HTML 페이지에서<script>차단하고 다음을 수행하는 코드를 바꿉니다.
    • 다음을 사용하여 플레이어에 대한 참조를 가져옵니다. getPlayer()과ready()관련 익명 이벤트 처리기 함수가있는 메서드.
    • 이벤트 핸들러 함수에서 이름이myPlayer그만큼this이 컨텍스트에서 플레이어를 나타내는 키워드입니다.
    • 플러그인을 호출하십시오.
    <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.backForwardButtons();
  });
</script>

코드 완성

기본 HTML 페이지

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
  <link href="back-forward-buttons.css" rel="stylesheet">
  </head>

  <body>

    <video id="myPlayerID"
      data-video-id="5992439742001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      data-application-id=""
      controls=""
      width="640" height="360"></video>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    <script src="back-forward-buttons.js"></script>

    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.backForwardButtons();
      });
    </script>

  </body>

  </html>

사용자 정의 플러그인의 자바 스크립트

  videojs.registerPlugin('backForwardButtons', function() {
    var myPlayer = this,
        jumpAmount = 5,
        controlBar,
        insertBeforeNode,
        newElementBB = document.createElement('div'),
        newElementFB = document.createElement('div'),
        newImageBB = document.createElement('img'),
        newImageFB = document.createElement('img');

    // +++ Assign IDs for later element manipulation +++
    newElementBB.id = 'backButton';
    newElementFB.id = 'forwardButton';

    // +++ Assign properties to elements and assign to parents +++
    newImageBB.setAttribute('src', '/assets/samples/back-forward-buttons/back-button.png');
    newElementBB.appendChild(newImageBB);
    newImageFB.setAttribute('src', '/assets/samples/back-forward-buttons/forward-button.png');
    newElementFB.appendChild(newImageFB);

    // +++ Get controlbar and insert elements +++
    controlBar = myPlayer.$('.vjs-control-bar');
    // Get the element to insert buttons in front of in conrolbar
    insertBeforeNode = myPlayer.$('.vjs-volume-panel');

    // Insert the button div in proper location
    controlBar.insertBefore(newElementBB, insertBeforeNode);
    controlBar.insertBefore(newElementFB, insertBeforeNode);

    // +++ Add event listeners to jump back or forward +++
    // Back button logic, don't jump to negative times
    newElementBB.addEventListener('click', function () {
      var newTime,
          rewindAmt = jumpAmount,
          videoTime = myPlayer.currentTime();
      if (videoTime >= rewindAmt) {
        newTime = videoTime - rewindAmt;
      } else {
        newTime = 0;
      }
      myPlayer.currentTime(newTime);
    });

    // Forward button logic, don't jump past the duration
    newElementFB.addEventListener('click', function () {
      var newTime,
          forwardAmt = jumpAmount,
          videoTime = myPlayer.currentTime(),
          videoDuration = myPlayer.duration();
      if (videoTime + forwardAmt <= videoDuration) {
        newTime = videoTime + forwardAmt;
      } else {
        newTime = videoDuration;
      }
      myPlayer.currentTime(newTime);
    });
  });

사용자 정의 플러그인의 CSS

  #backButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }
  #forwardButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }