한 페이지에서 여러 플레이어 사용

이 항목에서는 단일 HTML 페이지에서 여러 Brightcove 플레이어를 사용하는 방법에 대해 알아 봅니다.

여러 플레이어

같은 페이지에서 여러 플레이어를 사용하는 경우 특별히 수행해야 할 작업이 없습니다. 예를 들어, 같은 페이지에 다음 플레이어가있는 것은 완벽하게 허용됩니다.

<video-js data-video-id="4093372393001"
  data-account="1507807800001"
  data-player="ry3j6rsze"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script>

<video-js data-video-id="5076962725001"
  data-account="1507807800001"
  data-player="BkTGbgSq"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>

 

특별 고려 사항

동일한 HTML 페이지에 여러 플레이어를 배치 할 때 다음 사항에 유의하십시오.

  • 한 페이지에서 동일한 플레이어의 여러 인스턴스를 사용할 수 있습니다. index.min.js파일. 하나를 사용하는 것이 좋습니다. index.min.js가능하면 페이지로드 시간을 크게 절약 할 수 있습니다.
  • 한 페이지에 여러 명의 플레이어를 보유하고있는 것은 대역폭 측면에서 매우 비쌀 수 있습니다. preload로 설정auto . 일반적으로 권장되지 않습니다.
  • 두 플레이어가 모두 플레이어 ID 값을 사용하는 다른 계정의 동일한 페이지에서 여러 플레이어를 사용할 수 없습니다. default . (참고로, 고급 플레이어 코드에서 플레이어 ID는data-player속성.) 해결 방법은 기본 플레이어 중 하나를 복제하여 고유 식별자를 갖도록하는 것입니다.
  • IE11을 사용하는 경우 한 페이지에 동일한 플레이어의 여러 인스턴스가있는 경우 각 플레이어 인스턴스가id속성 또는 사용하지 않음id속성.
  • 다른 버전의 인 페이지 플레이어 혼합은 지원되지 않습니다. 유사한 버전에서 작동 할 수 있지만 쉽게 문제를 일으킬 수 있습니다. 다른 버전의 플레이어를 혼합해야하는 경우 iframe을 사용합니다. 플레이어의 버전이 같으면 괜찮습니다.
  • 인 페이지 플레이어를 믹싱 할 때 글로벌 bc는 페이지의 마지막 플레이어를 참조합니다.
  • RequireJS 및 여러 인 페이지 플레이어와 같은 AMD 모듈 로더를 사용하려고 할 때 알려진 문제가 있습니다. 현재로서는 이에 대한 해결 방법이 없습니다.
  • 고급 소스 코드가있는 페이지에 여러 360도 동영상을 포함 할 때 첫 번째 동영상 만 360도 상호 작용을 할 수 있습니다. 해결 방법은 기본 (iframe) 임베드를 사용하여 여러 360 비디오가 상호 작용할 수 있도록하는 것입니다.
  • 플레이어를 360 비디오와 믹싱하고 비 360 비디오와 플레이어를 믹싱하는 것은 지원되지 않습니다.
  • 여러 플레이어가 한 페이지에 동일한 ID를 가지고 있고 내부에 다른 크기를 지정하는 경우<video>태그 사용widthheight마지막 플레이어의 플레이어 CSS가 모든 플레이어에 적용됩니다.

    해결 방법

    • 크기 나 스타일을 다르게하려면 다른 플레이어 ID를 가진 플레이어를 사용하세요.
    • CSS를 사용하여 플레이어 크기 조정을 제공하는 플레이어의 클래스를 정의하고 다른 플레이어의 비디오 태그에 클래스를 추가합니다.