프로그래밍 방식으로 플레이어에 비디오 할당

이 항목에서는 플레이어에서 비디오를 동적으로 변경하는 방법을 배웁니다. 이를 위해 플레이어 인스턴스를 프로그래밍 방식으로 변경합니다. 이 문서는 플레이어에서 비디오를 변경하는 다양한 방법을 보여줍니다.

URL을 통해 비디오 ID 설정

URL 구현을 사용하고 재생되는 비디오를 동적으로 변경할 수 있습니다. 이렇게하려면 다음 형식의 URL 끝에 쿼리 문자열을 사용합니다. ?videoId=YOUR_VIDEO_ID다음 예와 같이.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001

참조 ID 사용

동영상 ID가 사용되는이 문서의 모든 예에서참조 ID대체 할 수 있습니다. 참조 ID를 사용하는 경우 해당 식별자 앞에심판 : . 예를 들어 첫 번째 URL은 동영상 ID를 사용하고 두 번째 URL은 참조 ID를 사용합니다.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd

태그 속성을 통해 동영상 ID 설정

인 페이지 소스 코드에는<video>꼬리표. 비디오의 Video Cloud ID는data-video-id HTML 5 데이터속성.

<video-js
  data-account="1507807800001"
  data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
  data-embed="default"
  data-video-id="2114345471001"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>

JavaScript를 사용하여 비디오 설정

대부분의 경우 사용자 상호 작용을 통해 재생되는 비디오를 제어하려고합니다. 이를 위해 JavaScript와 플레이어 카탈로그의getVideo()과load()원하는 비디오를 동적으로 검색하고 재생하는 메서드.

  • 1 ~ 10 행 : 값이없는 고급 (인 페이지 삽입) 코드data-video-id속성.
  • 13,19행: 사용ready()플레이어가 행동 할 준비가되었는지 확인하는 방법입니다.
  • 라인 14: 플레이어를 연결합니다. this변수와 함께 함수에서.
  • 15,18행: 카탈로그의 사용getVideo() Video Cloud ID 및 콜백 함수를 매개 변수로 사용하는 메소드.
  • 17 행 : 카탈로그의 사용load()비디오를로드하고 재생하는 방법입니다.
<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="rf1BTdKk6M"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.catalog.getVideo('2114345471001', function(error, video) {
        //deal with error
        myPlayer.catalog.load(video);
      });
    });
  </script>

iframe에서 비디오 설정

iframe에서 호스팅되는 플레이어에 동영상을 지정하려면 URL의 쿼리 문자열을 통해 동영상 ID (또는 앞에서 언급 한 참조 ID)를 전달할 수 있습니다. 예:

  <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

자바 스크립트를 사용하여 iframe의 쿼리 문자열을 변경할 수도 있습니다. src플레이어에게 재생할 새 동영상을 알려주는 속성입니다.

  • 1-4행: iframe 구현 코드입니다. 쿼리 문자열 ( ? character)는 재생할 비디오의 ID를 제공합니다.
  • 라인 7: 비디오가 변경되어야 할 때 호출 할 함수를 정의하십시오.
  • 8호선: 자바 스크립트 사용getElementsByTagName()배치하는 방법<iframe>변수에 태그를 지정합니다. 이 메서드는 페이지에서 일치하는 모든 요소의 배열을 반환하고 페이지에서 첫 번째 (유일한) iframe 태그를 사용하고 있으므로 배열의 0 번째 요소를 사용할 수 있습니다.
  • 9호선: 이전 문자열을 대체 할 쿼리 문자열을 만듭니다. 이것은 재생할 새 비디오를 정의합니다.
  • 라인 10: 변수에 할당src의 재산iframe꼬리표.
  • 11호선: 플레이어의 소스에서 이전 쿼리 문자열을 뺀 값을 추출합니다.
  • 라인 12: 새로운 가치를 구축합니다. src플레이어 소스를 새 동영상의 쿼리 문자열 정의와 결합하여
  • 13호선: 새 소스 / 비디오 정보를<iframe>태그src특성.
<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

<script type="text/JavaScript">
  function changeVideo() {
    var iframeTag = document.getElementsByTagName("iframe")[0],
      newVideo = "?videoId=3742256815001",
      theSrc = iframeTag.src,
      srcWithoutVideo = theSrc.substring( 0, theSrc.indexOf( "?" ) ),
      newSrc = srcWithoutVideo + newVideo;
    iframeTag.src = newSrc;
  }
</script>