재생 목록 API 가이드

개요

API의 일부로 다음 메서드, 이벤트 및 구성 옵션을 사용할 수 있습니다.

예

다음 Brightcove Player에는 재생 목록이로드되어 있으며 재생 목록에서 이동할 수있는 버튼을 사용합니다.

다음 비디오

이전 비디오

네 번째 동영상으로 이동

재생 목록 항목 개체

autoadvance () 메서드

그만큼player.playlist.autoadvance( )메서드는 설정자 역할 만하며 재생 목록 자동 진행을 설정합니다. 활성화되면 다음 비디오로 자동 진행하기 전에 비디오 끝에서 지정된 시간 (초) 동안 기다립니다. 양의 유한 정수가 아닌 값은 자동 진행을 취소하고 재설정하는 요청으로 처리됩니다. 제한 시간 동안 자동 진행 기능을 변경하면 자동 진행이 취소되고 다음 비디오로 진행되지 않지만 다음 비디오에 대해 새로운 제한 시간 값이 사용됩니다.

매개 변수 :

• :timeout 재생 목록에서 다음 동영상을로드하기 전에 지연 할 정수 (초)

반환 된 값 :

이 메서드는 값을 반환하지 않습니다.

방법의 사용 예는 다음과 같습니다.

player.playlist.autoadvance(0);다음 항목을로드하기 전에 기다리지 않습니다.

player.playlist.autoadvance(5);다음 항목을로드하기 전에 5 초 동안 기다립니다.

player.playlist.autoadvance(null);자동 진행을 재설정 및 취소합니다.

contains () 메서드

그만큼player.playlist.contains( item )메서드는 재생 목록에서 개체가 있는지 확인합니다. item매개 변수. 만약item재생 목록에 있습니다true없는 경우 반환됩니다. false반환됩니다.

매개 변수 :

• item : 재생 목록의 비디오 요소를 나타내는 값입니다.

항목 매개 변수의 유효한 양식은 다음과 같습니다.

• 비디오 URL (문자열)

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• 소스 및 유형이 정의 된 객체를 포함하는 배열

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• 소스 배열의 항목을 포함하는 객체

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }

• Video Cloud에서 다음을 사용할 수 있습니다. currentSrc()방법contains()메서드를 사용하여 현재 재생중인 동영상이 현재로드 된 재생 목록에 있는지 확인합니다.

  myPlayer.playlist.contains(myPlayer.currentSrc());

반환 된 값 :

메소드는 유형의 객체를 반환합니다. boolean .

currentIndex () 메서드

그만큼player.playlist.currentIndex( )메서드는 재생 목록에서 현재 항목의 인덱스를 검색합니다. 이것은 호출과 동일합니다currentItem()인수없이.

매개 변수 :

• 없음

반환 된 값 :

이 메서드는 숫자 유형 값을 반환합니다. 반환 된 값은 현재 플레이어에서 재생중인 동영상의 배열 위치를 나타냅니다. 플레이어가 현재 재생 목록이 아닌 동영상을 재생중인 경우currentIndex()돌아올 것이다-1 .

currentItem () 메서드

player.playlist.currentItem(index)메서드는 게터와 세터 역할을 모두 수행하며, 플레이어에서 재생 중인 재생 목록에서 비디오의 현재 인덱스를 검색하거나 인덱스를 기반으로 플레이어에서 재생할 새 비디오를 할당합니다. 인수없이 호출 된 경우 메서드는 검색을 수행하고 getter 역할을하며 인수는 값을 할당하고 setter 역할을합니다.

매개 변수 (세터) :

• :index 플레이어에로드 할 동영상 재생 목록의 0부터 시작하는 배열 색인을 나타내는 숫자입니다.

반환 된 값 (getter) :

메소드는 유형 값을 리턴합니다. number . 반환 된 값은 현재 플레이어에서 재생중인 동영상의 배열 위치를 나타냅니다. 플레이어가 현재 재생 목록이 아닌 동영상을 재생중인 경우currentItem()돌아올 것이다-1 .

특정 비디오로 이동하는 함수에서 메서드를 사용하는 예는 다음과 같습니다.

function goto2(){
  myPlayer.playlist.currentItem(2);
}

first () 메서드

그만큼player.playlist.first()메서드는 재생 목록의 첫 번째 항목을 재생합니다. 플레이어에서 재생되는 새 비디오는이 메서드 호출에서 반환됩니다. 그만큼currentItem새 색인으로 업데이트됩니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형의 객체를 반환합니다. object . 수동으로 만든 재생 목록에 대한이 객체의 예는 다음과 같습니다.

Video Cloud 재생 목록에 대한 이 객체의 예는 다음과 같습니다.

다음 비디오로 이동하기 위해 함수에서 메서드를 사용하는 예는 다음과 같습니다.

function goToBeginning() {
  var nextVidObject = myPlayer.playlist.first();
}

indexOf () 메서드

그만큼player.playlist.indexOf( item )메서드는 재생 목록에서 개체가 있는지 확인합니다. item매개 변수가 있고 발견 된 경우 항목의 0부터 시작하는 인덱스를 반환합니다. 메소드는-1항목을 찾을 수없는 경우.

매개 변수 :

• item : 재생 목록의 비디오 요소를 나타내는 값입니다.

항목 매개 변수의 유효한 양식은 다음과 같습니다.

• 비디오 URL (문자열)

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• 소스 및 유형이 정의 된 객체를 포함하는 배열

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• 소스 배열의 항목을 포함하는 객체

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }

• Video Cloud에서는 다음을 사용할 수 있습니다. currentSrc()방법indexOf()재생 목록에서 현재 재생중인 비디오의 위치를 찾는 메서드입니다.

  myPlayer.playlist.indexOf(myPlayer.currentSrc());

반환 된 값 :

메소드는 유형 값을 리턴합니다. number . 값은 요소의 인덱스가 0 인 위치를 나타내거나 개체를 찾을 수없는 경우 -1을 나타냅니다.

last () 메서드

그만큼player.playlist.last()메서드는 재생 목록의 마지막 항목을 재생합니다. 플레이어에서 재생되는 새 비디오는이 메서드 호출에서 반환됩니다. 그만큼currentItem새 색인으로 업데이트됩니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형의 객체를 반환합니다. object . 수동으로 만든 재생 목록에 대한이 객체의 예는 다음과 같습니다.

Video Cloud 재생 목록에 대한 이 객체의 예는 다음과 같습니다.

다음 비디오로 이동하기 위해 함수에서 메서드를 사용하는 예는 다음과 같습니다.

function goToEnd() {
  var nextVidObject = myPlayer.playlist.last();
}

lastIndex () 메서드

그만큼player.playlist.lastIndex( )메서드는 재생 목록에서 마지막 항목의 인덱스를 반환합니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형 값을 리턴합니다. number . 반환 된 값은 재생 목록에서 마지막 동영상의 배열 위치를 나타냅니다.

next () 메서드

그만큼player.playlist.next()메서드는 플레이어를 재생 목록의 다음 항목으로 이동합니다. 플레이어에서 재생되는 새 비디오는이 메서드 호출에서 반환됩니다. 그만큼currentItem새 색인으로 업데이트됩니다. 재생 목록의 끝에 있으면 끝을지나 진행할 수 없으며 아무것도 반환되지 않습니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형의 객체를 반환합니다. object . 수동으로 만든 재생 목록에 대한이 객체의 예는 다음과 같습니다.

Video Cloud 재생 목록에 대한 이 객체의 예는 다음과 같습니다.

다음 비디오로 이동하기 위해 함수에서 메서드를 사용하는 예는 다음과 같습니다.

function nextVideo() {
  var nextVidObject = myPlayer.playlist.next();
}

nextIndex () 메서드

그만큼player.playlist.nextIndex( )메서드는 재생 목록에서 다음 항목의 인덱스를 반환합니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형 값을 리턴합니다. number . 반환 된 값은 재생 목록에서 재생 될 다음 동영상의 배열 위치를 나타냅니다.

플레이어가 마지막 항목에있는 경우이 메서드는 마지막 항목의 인덱스를 반환합니다. 그러나 재생 목록이 반복되고 마지막 항목에있는 경우 메서드는0 . 플레이어가 현재 재생 목록이 아닌 동영상을 재생중인 경우-1 .

playlist () 메서드

그만큼player.playlist(newPlayList)메소드는 현재 플레이어에서 재생중인 재생 목록을 검색하거나 재생할 플레이어에 재생 목록을 할당하는 getter 및 setter 역할을 모두 수행합니다. 인수없이 호출 된 경우 메서드는 검색을 수행하고 getter 역할을하며 인수는 값을 할당하고 setter 역할을합니다.

매개 변수 (세터) :

• :newPlaylist 비디오 소스 / 객체의 배열. 개체는 수동으로 만들거나 단순히 Video Cloud 재생 목록 ID 또는 참조 ID로 만들 수 있습니다.

사용할 수 있지만playlist()메서드를 setter로 사용하는 경우 Brightcove Player의 카탈로그 기능을 활용하여 재생 목록을로드하는 것이 좋습니다.  myPlayer.catalog.getPlaylist( playlistID )과myPlayer.catalog.load( playlist ) . 참조플레이어 카탈로그자세한 내용은 문서를 참조하십시오.

수동으로 생성 된 재생 목록에 메서드를 사용하는 예는 다음과 같습니다.

myPlayer = this;
myPlayer.playlist([{
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_SeaHorse.mp4", "type": "video/mp4"
  }],
  "name": "Seahorse",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_Anemone.mp4", "type": "video/mp4"
  }],
  "name": "Sea Anemone",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4", "type": "video/mp4"
  }],
  "name": "Tiger",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_ClownFish.mp4", "type": "video/mp4"
  }],
  "name": "Clownfish",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_LionFish.mp4", "type": "video/mp4"
  }],

반환 된 값 (getter) :

이 메서드는array of objects .

반환 된 Video Cloud 재생 목록 (Video Cloud 비디오 개체의 배열)의 예는 다음과 같습니다.

다음 예제는 카탈로그 개체의getPlaylist()과load() Video Cloud 재생 목록을로드하는 방법. 앞에서 언급했듯이 이것은 Video Cloud 재생 목록을 사용할 때 권장되는 접근 방식입니다. 자세한 내용은플레이어 카탈로그문서.

myPlayer = this;
myPlayer.catalog.getPlaylist('1754200320001', function(error, playlist){
  myPlayer.catalog.load(playlist);
  console.log('mediainfo', myPlayer.mediainfo);
)};

console.log('playlist id: ', myPlayer.options()['data-playlist-id']);

previous () 메서드

그만큼previous()메서드는 재생 목록의 이전 항목을 재생합니다. 플레이어에서 재생되는 새 비디오는이 메서드 호출에서 반환됩니다. 그만큼currentItem새 색인으로 업데이트됩니다. 재생 목록의 시작 부분에있는 경우 시작을지나 계속 진행할 수 없으며 아무 것도 반환되지 않습니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형의 객체를 반환합니다. object . 수동으로 만든 재생 목록에 대한이 객체의 예는 다음과 같습니다.

Video Cloud 재생 목록에 대한 이 객체의 예는 다음과 같습니다.

이전 비디오로 이동하기 위해 함수에서 메서드를 사용하는 예는 다음과 같습니다.

function previousVideo() {
  myPlayer.playlist.previous();
}

previousIndex () 메서드

그만큼player.playlist.previsousIndex( )메소드는 현재 플레이어에서 재생중인 동영상을 진행하는 동영상의 색인을 반환합니다.

매개 변수 :

• 없음

반환 된 값 :

메소드는 유형 값을 리턴합니다. number . 반환 된 값은 현재 플레이어에서 재생중인 동영상을 진행하는 동영상의 배열 위치를 나타냅니다.

플레이어가 첫 번째 항목에 있으면 메서드는0 . 그러나 재생 목록이 반복되고 첫 번째 항목에 있으면 마지막 항목의 인덱스를 반환합니다. 플레이어가 현재 재생 목록이 아닌 동영상을 재생중인 경우-1 .

repeat () 메서드

재생 목록의 마지막 비디오가 끝나면 재생 목록을 반복 할 수 있습니다. playlist.repeat()방법. 이 기능은 재생 목록의 마지막 비디오가 완료되면 재생 목록의 첫 번째 비디오를 재생합니다.

매개 변수 :

• 재생 목록이 반복되어야하는지 여부를 나타내는 부울 값. 기본값은false

반환 된 값 :

현재 가치playlist.repeat

이 메서드는 다음 중 하나를 전달하여 값을 설정합니다. true또는false인수로. 인수를 사용하지 않으면 메서드는 현재 값을 반환합니다. 다음 코드는 구현을 보여줍니다.

• 1-11 행 : 다음을 제외한 표준 재생 목록 플레이어 코드id값이 추가됩니다. myPlayerID .
• 지하철 16호선 반복 할 재생 목록을 설정합니다.
• 17 행 : 작동중인 메소드를 getter로 표시합니다. 콘솔에 다음 값을 표시합니다. repeat .

<video-js id="myPlayerID"
    data-playlist-id="5455901760001"
    data-account="1507807800001"
    data-player="SyMOsyA-W"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script>

  <div class="vjs-playlist"></div>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.playlist.repeat(true);
    console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
  });
</script>

reverse () 메서드

그만큼player.playlist.reverse( )메서드는 재생 목록의 동영상 순서를 변경하여 첫 번째 동영상이 마지막 동영상이되고 마지막 동영상이 첫 번째 동영상이됩니다.

매개 변수 :

• 없음

반환 된 값 :

이 메서드는 값을 반환하지 않습니다.

재생 목록의 비디오 순서를 반대로합니다. 예를 들어 첫 번째 비디오가 마지막 비디오가되고 마지막 비디오가 첫 번째 비디오가됩니다.

이 메서드는playlistsorted후진 이벤트.

shuffle () 메서드

그만큼player.playlist.shuffle( )메소드는 재생 목록 항목의 순서를 셔플 / 무작위 화합니다.

매개 변수 :

• 선택 과목rest선택권: 기본적으로 전체 재생 목록은 무작위로 지정됩니다. 그러나 이것은 사용자가 이미 비디오를보고있는 경우와 같이 모든 경우에 바람직하지 않을 수 있습니다. 언제true이 옵션에 전달되면 현재 항목 다음에 재생 목록 항목 만 셔플합니다. 예를 들어, 첫 번째 항목에있을 때 메서드는 두 번째 항목과 그 이후의 항목 만 섞습니다. 매개 변수를 사용하는 구문은 다음과 같습니다.

  player.playlist.shuffle({rest: true});

반환 된 값 :

이 메서드는 값을 반환하지 않습니다.

이 메서드는 재생 목록의 항목을 Fisher-Yates 셔플 알고리즘 .

이 메서드는playlistsorted셔플 후 이벤트.

플레이어가 처음로드 될 때 재생 목록을 셔플하려면 다음을 사용해야합니다.  이벤트 처리기의 메서드playlistsorted행사. 이렇게하면 메서드가 재생 목록이 플레이어에로드되기 전에 셔플을 시도하는 상황을 방지 할 수 있습니다. 샘플 구문은 다음과 같습니다.

myPlayer.on("duringplaylistchange", function() {
  myPlayer.playlist.shuffle();
});

sort () 메서드

그만큼player.playlist.sort( )메소드는 자바 스크립트와 동일한 방식으로 재생 목록의 동영상을 정렬합니다. Array.prototype.sort ()방법.

매개 변수 :

• :compareFunction 동영상을 정렬하는 방법을 정의하는 함수입니다.

반환 된 값 :

이 메서드는 값을 반환하지 않습니다.

비디오를 정렬하는 방법의 사용 예duration다음과 같습니다.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.on('loadedmetadata', function(){
    myPlayer.playlist.sort(function(a, b) {
      return a.duration - b.duration;
    });
  });
});

이 메서드는playlistsorted후진 이벤트.

beforeplaylistitem 이벤트

그만큼beforeplaylistitem이벤트는 재생 목록 내의 새 콘텐츠 소스로 전환하기 전에 전달됩니다 (예 : currentItem() , first()등이 호출 됨) 플레이어의 상태가 변경되기 전에.

재생 목록 변경 이벤트 중

그만큼duringplaylistchange이벤트는 호출시 재생 목록의 내용이 변경된 후 전달됩니다. playlist() , 현재 재생 목록 항목이 변경되기 전에. 이벤트 객체에는 몇 가지 특수 속성이 있습니다.

• :nextIndex 먼저 재생 될 다음 재생 목록의 인덱스입니다.
• :nextPlaylist 다음 재생 목록의 얕은 복제본입니다.
• :previousIndex 이전 재생 목록의 색인 (이 이벤트가 트리거 될 때 항상 현재 색인과 일치하지만 완전성을 위해 제공됨).
• :previousPlaylist 이전 재생 목록의 얕은 복제본입니다.

주의 사항

이 이벤트가 시작되는 동안 재생 목록은 변경 상태로 간주되며 다음과 같은 효과가 있습니다.

• 메인 플레이리스트 메소드 호출, player.playlist([...])오류가 발생합니다.
• 재생 목록 탐색 방법, first , last , next과previous , 작동 불가능하게 렌더링됩니다.
• 그만큼currentItem()메소드는 getter로만 작동합니다.
• 정렬 방법 동안sort , reverse과shuffle , 계속 작동합니다. playlistsorted행사.
•  

이 이벤트를 사용하는 이유

이 이벤트는 플레이어에 새 소스가 설정되기 전과 재생 전에 재생 목록 설정 프로세스를 가로 챌 수있는 기회를 제공합니다. playlistchange일관된 재생 목록 API를 제공하면서 이벤트가 발생합니다. 한 가지 사용 사례는 서버에서 방금 가져온 재생 목록을 셔플하지만 초기 소스가 플레이어에로드되거나 재생 목록 UI가 업데이트되기 전일 수 있습니다.

player.on('duringplaylistchange', function() {
  // Remember, this will not trigger a "playlistsorted" event!
  player.playlist.shuffle();
});

player.on('playlistchange', function() {
  videojs.log('The playlist was shuffled, so the UI can be updated.');
});

playlistchange 이벤트

그만큼playlistchange이벤트는 재생 목록이 변경 될 때마다 비동기 적으로 전달됩니다. 이 이벤트가 전달되면 플레이어는 새 재생 목록의 첫 번째 동영상을로드하기 시작합니다. 브라우저가 새 재생 목록의 첫 번째 동영상을로드하기 시작하도록 비동기 적으로 실행됩니다.

playlistitem 이벤트

그만큼playlistitem재생 목록 내에서 새 콘텐츠 소스로 전환 할 때 (예 : currentItem() , first()등이 호출 됨) 플레이어의 상태가 변경된 후 재생이 다시 시작되기 전에.

재생 목록 정렬 된 이벤트

그만큼playlistsorted재생 목록 항목의 순서를 변경하는 메서드가 호출되면 이벤트가 전달됩니다. sort() , reverse()또는shuffle() .

플레이온셀렉트

이 값은 다음으로 설정 될 때 구성 옵션입니다. true플레이어의 현재 동영상이 이전에 일시 중지 된 경우에도 재생 목록에서 클릭 한 동영상이 재생을 시작합니다. 기본적으로 재생 목록에서 새 비디오를 클릭하면 새 비디오가 로드되지만 플레이어가 일시 중지된 경우 일시 중지된 상태로 유지됩니다.

이 값을 조작하는 방법에 대한 정보는플레이어 구성 가이드-재생 목록 섹션 .

비주얼 플레이리스트

페이지에 재생 목록을 시각적으로 표시하려면 플레이어를 구성해야합니다. Studio를 사용하여 구성을 업데이트 할 수 있습니다. PLAYERS > Styling섹션 (세로 또는 가로 재생 목록을 선택할 수 있음) :

원하는 경우 플레이어 관리 API를 사용하여 재생 목록 용으로 플레이어를 구성 할 수도 있습니다. 참조Playlists섹션플레이어 구성 가이드완전한 정보를 위해.

프로그래밍 방식으로 재생 목록이 사용 설정되어 있는지 확인할 수 있습니다. player.playlistUi정의됩니다.

console.log('myPlayer.playlistUi:', myPlayer.playlistUi);