프로그래밍 방식으로 큐 포인트 구현

Video Cloud 큐 포인트

문서의이 섹션에서는 카탈로그 큐 포인트를 설정하고 카탈로그 큐 포인트 이벤트 디스패치를 수신하는 방법을 배웁니다.

Video Cloud 큐 포인트 설정

Video Cloud 큐 포인트는 Video Cloud Studio 및이 문서에 자세히 설명 된 여러 다른 방법을 사용하여 비디오와 연결할 수 있습니다. 미디어 모듈에서 큐 포인트 작업 .

Video Cloud 큐 포인트에서 작동-비디오가 플레이어에 정적으로 바인딩 됨

문서의이 섹션에서는 동영상이 플레이어에 정적으로 바인딩되어있을 때 카탈로그 큐 포인트를 처리하는 방법을 알아 봅니다. 즉, Studio에서 또는 플레이어 관리 API를 직접 사용하여 동영상이 플레이어에로드되었음을 의미합니다.

큐 포인트가로드되기 전에 처리하려는 경합 상태를 방지하려면loadedmetadata큐 포인트를 처리하기 전에 전달되는 이벤트입니다. 적절한 텍스트 트랙을 읽은 후에는oncuechange전달 될 큐 포인트 이벤트를 수신하는 이벤트입니다.

다음 코드는 큐 포인트를 수신하고 큐 포인트의 데이터를 표시하는 방법을 보여줍니다. 이 예제에서 비디오는 플레이어에 정적으로 바인딩되어 있습니다.

• 11호선: 동적으로 생성 된 HTML을 삽입 할 위치로 단락 요소를 만듭니다.
• 18,30행: 사용one()이벤트 리스너를 추가하는 메소드loadedmetadata한 번만 이벤트. 여기서 이벤트 핸들러 함수는 익명으로 정의됩니다.
• 19 행 : 다음을 사용하여 TextTracks 배열을 검색합니다. textTracks()그런 다음 큐 포인트를 보유하는 0 번째 요소를 변수에 할당합니다. tt . 일부 구현에서는 큐 포인트가 다른 배열 요소에있을 수 있습니다. 참조올바른 트랙 찾기자세한 내용은 아래 섹션을 참조하십시오.
• 20,28행: 이벤트 처리기 함수를 설정합니다. oncuechange이벤트가 전달됩니다.
• 21 행 : 첫 번째 (0 번째 배열 요소) 큐 포인트 디스패치를 받고 있는지 확인합니다. 이 조건이 없으면 각 큐 포인트가 두 번 작동하는 것을 볼 수 있습니다. 지속 시간이 겹치는 큐 포인트를 사용하는 경우이 조건이 달라야합니다.
• 22-26행: 큐 포인트의 정보를 사용하여 HTML을 동적으로 만들고 HTML 페이지에 삽입합니다.
• 29행: 비디오를 재생합니다.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="zN3V18ZPEu"
  data-embed="default"
  controls=""
  data-video-id="1507781667001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>

<p id="insertionPoint"></p>

<script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var player = this;
    player.one("loadedmetadata", function () {
      var tt = player.textTracks()[0];
      tt.oncuechange = function () {
        if (tt.activeCues[0] !== undefined) {
          var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
          dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
          dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
          dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
          document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
        }
      }
      player.play();
    });
  });
</script>

Video Cloud 큐 포인트에 대한 작업-플레이어에서 동적으로 비디오로드

이 문서 섹션에서는 비디오가 플레이어에 동적으로로드 될 때 카탈로그 큐 포인트를 처리하는 방법을catalog.getVideo()과catalog.load()행동 양식.

플레이어 카탈로그를 사용하여 비디오를 가져오고로드 할 때 큐 포인트를 처리하는 것이 정적으로 바인딩 된 비디오를 사용할 때보 다 조금 더 쉽습니다. loadedmetadata행사.

• 11호선: 동적으로 생성 된 HTML을 삽입 할 위치로 단락 요소를 만듭니다.
• 17,31행: 사용catalog.getVideo()비디오를 검색하는 방법. 콜백 함수는 여기서 익명으로 정의됩니다.
• 19 행 : 사용catalog.load()플레이어에 비디오를로드하는 메서드입니다.
• 21 행 : 다음을 사용하여 TextTracks 배열을 검색합니다. textTracks()그런 다음 큐 포인트를 보유하는 0 번째 요소를 변수에 할당합니다. tt . 일부 구현에서는 큐 포인트가 다른 배열 요소에있을 수 있습니다. 참조올바른 트랙 찾기자세한 내용은 아래 섹션을 참조하십시오.
• 22-30행: 이벤트 처리기 함수를 설정합니다. oncuechange이벤트가 전달됩니다.
• 23 행 : 첫 번째 (0 번째 배열 요소) 큐 포인트가 정의되어 있는지 확인하십시오. 이 조건이 없으면 각 큐 포인트가 두 번 작동하고 두 번째에는 정의 된 요소가 없음을 알 수 있습니다. activecues배열 (두 번째 큐 변경은 큐 포인트 끝을위한 것이므로). 지속 시간이 겹치는 큐 포인트를 사용하는 경우이 조건이 달라야합니다.
• 24-28행: 큐 포인트의 정보를 사용하여 HTML을 동적으로 만들고 HTML 페이지에 삽입합니다.
• 32 행 : 비디오를 재생합니다.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="zN3V18ZPEu"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>

<p id="insertionPoint"></p>

<script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>
  <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var player = this;
    player.catalog.getVideo('1507781667001', function (error, video) {
      //deal with error
      player.catalog.load(video);
      player.one("loadedmetadata", function () {
        var tt = player.textTracks()[0];
        tt.oncuechange = function () {
          if (tt.activeCues[0] !== undefined) {
            var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
            dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
            dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
            dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
            document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
          }
        }
      });
      player.play();
    });
  });
</script>

모든 Video Cloud 큐 포인트 정보 검색

모든 Video Cloud 큐 포인트 정보를 직접 사용할 수있는 것은 아닙니다. activecues정렬. 이 문제는 다음에서 원하는 정보를 검색하여 쉽게 해결할 수 있습니다. mediainfo특성.

이 솔루션의 기본 접근 방식은 다음과 같습니다.

1. 기다려loadstart이벤트mediainfo채워질 속성입니다.
2. 할당cue_points배열에서mediainfo속성을 변수에 추가합니다. 이 변수는 완전한 Video Cloud 큐 포인트 정보를 포함합니다.
3. 큐 포인트 이벤트에서 해당 큐 포인트 데이터를 검색합니다. time재산 가치. 이것은 객체의 속성 값을 기반으로 배열에서 객체를 가져 오는 도우미 함수를 사용하여 수행됩니다.
4. 큐 포인트의 데이터를 사용합니다.

다음 이미지는 전체 큐 포인트 배열 (왼쪽 상단), 단일 큐 포인트 데이터 컬렉션 (오른쪽 상단) 및 해당 단일 큐 포인트 데이터 컬렉션의 하나의 속성 (오른쪽 하단)을 보여줍니다.

아래 스 니펫에서는 위의 예제에서 새로 추가되거나 변경된 코드 만 설명합니다.

• 452-463 행 : 모든 큐 포인트의 배열에서 단일 큐 포인트 데이터 컬렉션을 추출하는 데 사용할 함수를 포함합니다. 모든 큐 포인트의 배열, 특정 값을 검색하는 속성 및 마지막으로 검색중인 값을 전달합니다.
• 432 행 : 청취loadstart행사. 동영상이로드되기 시작하면mediainfo속성이 채워집니다.
• 434 행 : 모든 Video Cloud 큐 포인트의 배열을 변수에 할당합니다.
• 443 행 : 큐 포인트 디스패치 이벤트 핸들러에서 특정 큐 포인트의 데이터 컬렉션을 변수에 할당합니다. 첫 번째 글 머리 기호에서 언급 한 함수가 호출되는 곳입니다. 사용되는 인수는 다음과 같습니다.
  • :cuePointAra Video Cloud 큐 포인트의 전체 컬렉션입니다.
  • :'time' 값을 검색 할 속성입니다.
  • :tt.activeCues[0].startTime 큐 포인트 디스패치 이벤트 핸들러에서 현재 처리중인 큐 포인트의 시작 시간입니다.
• 444-445 행 : 디버깅console.log()프로덕션 코드에서 제거해야하는 메서드 호출.

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      cuePointAra = [],
      allCuePointData;
    myPlayer.on('loadstart', function () {
      //console.log('mediainfo', myPlayer.mediainfo);
      cuePointAra = myPlayer.mediainfo.cue_points;
      var tt = myPlayer.textTracks()[0];
      tt.oncuechange = function () {
        if (tt.activeCues[0] !== undefined) {
          var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
          dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
          dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
          dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
          document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
          allCuePointData = getSubArray(cuePointAra, 'time', tt.activeCues[0].startTime);
          console.log('cue point data:', allCuePointData);
          console.log('cue point metadata:', allCuePointData[0].metadata);
        }
      }
      myPlayer.play();
      myPlayer.muted(true);
    });

    function getSubArray(targetArray, objProperty, value) {
      var i, totalItems = targetArray.length,
        objFound = false,
        idxArr = [];
      for (i = 0; i < totalItems; i++) {
        if (targetArray[i][objProperty] === value) {
          objFound = true;
          idxArr.push(targetArray[i]);
        }
      }
      return idxArr;
    };
  });
</script>

프로그래밍 방식 큐 포인트

프로그래밍 방식으로 큐 포인트를 추가 할 수 있습니다. 핵심 방법은 HTML5에서 비롯됩니다. VTTCue상호 작용. 다음 구문을 사용하여 큐 포인트를 만들 수 있습니다.

new VTTCue( startTime, endTime, text )

큐 포인트를 처리하는 로직은 이전 예제와 매우 유사하므로 위에서 사용 된 것과 다른 코드 만 자세히 설명합니다.

• 43,44 행 : 추가textTrack플레이어의addRemoteTextTrack()방법. 지정kind되려고메타 데이터 , 및label ,이 경우시간 제한 큐 포인트 .

• 45-48 행 : 플레이어의 큐 포인트를 사용하여 두 개의 큐 포인트를 만들기 전에 10 밀리 초를 기다립니다. addCue()방법. 큐 포인트는 HTML5를 사용하여 인스턴스화됩니다. VTTCue()건설자.

• 22 행 : 청취addtrack행사.
• 23 행 : 플레이어와 관련된 모든 텍스트 트랙을 검색합니다.
• 24 행 : 설정attLength텍스트 트랙 수에 따라 달라집니다. 이 값은 다음 코드 세그먼트의 루프에서 사용됩니다.
• 25-30 행 : 각 텍스트 트랙을 반복하여label올바른 값과 같아야합니다. 발견되면 현재 텍스트 트랙을 변수에 할당하고 루프를 종료합니다.

<video-js id="myPlayerID"
  data-video-id="4607746980001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  width="640" height="360"
  controls=""></video-js>

<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p id="insertionPoint"></p>

<script type="text/javascript">
  videojs.getPlayer("myPlayerID").ready(function () {
    var myPlayer = this,
      textTrack = [],
      allTextTacks,
      attLength,
      tt;
    myPlayer.one("loadedmetadata", function () {
      myPlayer.textTracks().addEventListener('addtrack', function () {
        allTextTacks = myPlayer.textTracks();
        attLength = allTextTacks.length;
        for (var i = 0; i < attLength; i++) {
          if (allTextTacks[i].label === 'Timed Cue Point') {
            tt = allTextTacks[i];
            break;
          }
        }
        tt.oncuechange = function () {
          if (tt.activeCues[0] !== undefined) {
            var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
            dynamicHTML += "text: <strong>" + tt.activeCues[0].text + "</strong>, ";
            dynamicHTML += "startTime: <strong>" + tt.activeCues[0].startTime + "</strong>,  ";
            dynamicHTML += "endTime: <strong>" + tt.activeCues[0].endTime + "</strong>";
            document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/><br/>";
          } else {
            document.getElementById("insertionPoint").innerHTML += "Cue point duration over" + "<br/><br/>";
          }
        }; //end oncuechange
      }); // end playing
      textTrack = myPlayer.addRemoteTextTrack({kind: 'metadata', label: 'Timed Cue Point', mode: 'hidden'}, false);
      textTrack.track.mode = 'hidden';
      setTimeout(function(){
        textTrack.track.addCue(new window.VTTCue(2, 5, 'cue point 1 text'));
        textTrack.track.addCue(new window.VTTCue(10, 15, 'cue point 2 text'));
      }, 10);
    }); //end on loadedmetadata
  }); //end ready
</script>

코드는 다음 스크린 샷과 같이 출력을 생성합니다. 참고신분증값은 사용할 때 값이 제공되지 않습니다. VTTCue()생성자 메서드.