플레이어 인스턴스화 지연

인스턴스화 지연

고급 (페이지 내 삽입) 플레이어 구현 코드를 사용하지만 플레이어 인스턴스화를 지연시키는 몇 가지 사용 사례가 있습니다. 이렇게하려면 다음을 변경해야합니다. <videos-js>태그의 속성을 사용하고bc()플레이어를 초기화하는 메서드입니다. 메서드는 플레이어 ID 또는 플레이어 요소 자체를 인수로 사용할 수 있습니다.

video-js 태그 수정

플레이어 인스턴스화를 지연 할 때 모든<video-js>태그의 속성 또는 플레이어가 인스턴스화됩니다. 표준 고급 (인 페이지 포함) 코드에서 세 가지 속성을 제거해야합니다. 제거해야하는 속성은 다음과 같습니다.

• data-account
• data-player
• data-video-id

이렇게하면 다음 속성이<video-js>꼬리표:

• data-embed
• class
• controls (optional)

이 세 가지 속성 중 하나라도 남아 있기 때문에 속성을 제거해야하는 이유는 Brightcove Player가 인스턴스화되도록합니다.

사용되는 고급 코드는 다음 코드 스 니펫에서 패턴 화되어야합니다. 참고id태그에 추가됩니다.

<video-js id="myPlayerID"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

아래에 표시된 고급 코드 및 JavaScript 코드에 대한 이러한 변경 사항은 함께 작동하여 플레이어의 인스턴스화를 지연시킵니다.

JavaScript 사용

매우 일반적인 방법은 다음과 유사한 코드를 사용하여 플레이어와 프로그래밍 방식으로 상호 작용할 준비를하는 것입니다.

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

이 접근 방식은 플레이어를 인스턴스화하므로 사용할 수 없습니다. 대신, 당신은bc()다른 환경 설정이 설정된 후 플레이어를 인스턴스화하는 방법. 이bc()메서드는 Brightcove Player의 새 인스턴스를 만드는 데 사용되며 일반적으로 다음을 사용할 때 자동으로 호출됩니다. <video-js>여기에 설명 된 단계를 따르지 않는 한 태그.

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

아니id플레이어에

어떤 이유로 든 사용하지 않으려면id플레이어에서 다음 코드를 사용하여 인스턴스화를 지연 할 수 있습니다.

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('vTag');

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

SSAI 광고 장애 조치가 포함 된 CSAI

광고 장애 조치가 켜져 있으면 Brightcove Player가 브라우저에 광고 차단기가 있는지 감지합니다. 그렇지 않은 경우 클라이언트 측 광고 (CSAI)가 재생됩니다. 광고 차단기가 감지되면 플레이어가 자동으로 서버 측 광고 (SSAI)를 요청합니다. 자세한 내용은 SSAI : 광고 차단 감지 및 자동 장애 조치문서.

기본적으로bc()메서드를 사용하면 플레이어가 즉시 초기화됩니다. 광고 장애 조치를 사용하려는 경우bc()메서드를 사용하려면 플레이어가 광고 차단기가 있는지 확인하기를 기다려야합니다. 다음 코드로이를 수행 할 수 있습니다.

bc.usingAdBlocker().then(function() {
  // The promise callback receives a true/false result, which is stored
  // internally, so future bc() calls will use it. There is no need to
  // handle it yourself.
  //
  // You can pass custom arguments to bc, as normal, if needed.
  bc();
});

예

다음은 몇 가지 예제 코드입니다.

HTML

이것은 예제의 HTML입니다.

<video-js id="myPlayerID"
	data-embed="default"
	data-application-id=""	
	controls=""
	width="640"
	height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>

자바 스크립트

이것은 예제의 JavaScript입니다.

<script type="text/javascript">
  // +++ Define the player options +++
  var options = {
    controlBar: {
      volumePanel: {
        inline: false,
        vertical: true
      }
    }
  };

  // +++ Add the player attributes +++
  var myPlayer,
		myPlayerEl = document.getElementById("myPlayerID");
  myPlayerEl.setAttribute('data-account', 1752604059001);
  myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
  myPlayerEl.setAttribute('data-video-id', 5802784116001);

  // +++ Create the player +++
  bc.usingAdBlocker().then(function() {
    myPlayer = bc(myPlayerEl, options);

    // +++ Optionally, mute and start playback +++
    myPlayer.on('loadedmetadata',function(){
      myPlayer.muted(true);
      myPlayer.play();
    });
  });
</script>