플레이어 개발자 기본 사항: 사용자 정의 플러그인 - 이유 및 방법

이 항목에서는 사용자 지정 플러그인을 사용해야하는 이유를 배우고 개발 단계에 대한 높은 수준의 단계를 배웁니다.
 

왜 커스텀 플러그인인가?

  • 여러 위치에서 동일한 코드를 복제하지 마십시오.
  • 플러그인과 관련된 모든 코드는 플레이어의 일부가됩니다.

단계

  1. 향상된 플레이어 기능 코딩
  2. CSS 만 포함 된 새 파일 만들기
  3. 자바 스크립트가 포함 된 새 파일 만들기
    • getPlayer()메서드를 사용하는 코드 줄 변경
  4. CSS 및 자바 스크립트 파일에 링크 한 다음 사용자 정의 플러그인을 호출

코드 완성

기본 HTML 페이지

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="custom-plugin.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="custom-plugin.js"></script>

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

  </body>

  </html>

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

  videojs.registerPlugin('pluginName', function() {
    var myPlayer = this;
    // Complete JavaScript
    // ...
  });

사용자 정의 플러그인의 CSS

  /*
   CSS Here
   */