플레이어 개발자 기본 사항: 코드 작성 준비

이 항목에서는 플레이어를 제어하는 코드를 작성할 수 있도록 준비하는 표준 모범 사례 템플릿을 만드는 방법을 배웁니다.

단계

  1. 고급 구현 플레이어 코드의 인스턴스를 HTML 페이지에 붙여 넣습니다.
    <video data-video-id="5831704295001"
      data-account="921483702001"
      data-player="Uj7Yz80yM"
      data-embed="default"
      data-application-id=""
      controls=""
      width="640"
      height="360"></video>
    <script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>
  2. 추가id속성<video>태그를 지정하고 값을myPlayerID .
    <video id="myPlayerID"
  3. 추가하다<script>바로 위에 블록</body>꼬리표.
  4. 에서script블록, 사용videojs.getPlayer()페이지에서 플레이어에 대한 참조를 가져 오는 메소드입니다. 사용id이전에 메서드의 인수로 추가되었습니다.
    <script>
      videojs.getPlayer('myPlayerID')
    </script>
  5. 사용ready()메서드를 사용하고 익명 콜백 함수를 인수로 코딩합니다.
    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
    
      )};
    </script>
  6. 이름이 지정된 변수 선언myPlayer익명 함수에서 키워드를 할당하십시오. this , 익명 함수의 컨텍스트에서 플레이어를 나타냅니다.
    var myPlayer = this;

완성 된 코드

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Preparing to Write Code</title>
</head>

<body>

<video id="myPlayerID"
  data-video-id="5831704295001"
  data-account="921483702001"
  data-player="Uj7Yz80yM"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video>
<script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>

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

</body>

</html>