개요: 플레이어 API

플레이어 참조

API 함수를 사용하려면 플레이어 개체에 대한 액세스 권한이 필요합니다. 이것은하기 쉽습니다. 동영상 태그에 ID가 있는지 확인하기 만하면됩니다. 예제 소스 코드의 ID는myPlayerID , 플레이어 개체는myPlayer변하기 쉬운. 한 페이지에 여러 동영상이있는 경우 모든 동영상 태그에 고유 ID가 있는지 확인하세요.

var myPlayer = videojs.getPlayer('myPlayerID');

플레이어 준비 방법

Video.js에서 동영상 및 API를 설정하는 데 걸리는 시간은 연결 속도와 같은 여러 요인에 따라 달라집니다. 이러한 이유로 우리는 플레이어의ready()플레이어의 API가 필요한 코드를 트리거하는 메서드입니다.

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

  // EXAMPLE: Handle an event
  myPlayer.on('loadstart',doLoadstart);

});

플레이어 준비 vs. 플레이어 준비 비디오

이 문서와 관련된 내용을 보면 이것이 API의 안전한 사용이라고 생각할 수 있습니다.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.play()
});

플레이어가 상호 작용할 준비가되었다고해서 플레이어의 동영상이로드되고이 예에서 재생 될 준비가되었다고 보장하지 않는 문제입니다. 이러한 이유로, 당신은loadedmetadata비디오를 재생할 준비가되었음을 보장하는 이벤트입니다. 코드는 다음과 같이 나타납니다.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.on('loadedmetadata',function(){
    myPlayer.play();
  })
});

전화하면play()메서드는 함수에서 수행 할 유일한 작업이며 다른 방식으로 플레이어와 상호 작용하지 않을 것입니다.이 코드는 이렇게 단순화 할 수 있습니다 ( ready()방법):

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

API 메소드

이제 준비된 플레이어에 액세스 할 수 있으므로 비디오를 제어하고 값을 가져 오거나 비디오 이벤트에 응답 할 수 있습니다. Video.js API 함수 이름은 HTML5 미디어 API . 주요 차이점은 getter / setter 함수가 비디오 속성에 사용된다는 것입니다.

// setting a property on a bare HTML5 video element
myVideoElement.currentTime = "120";

// setting a property on a Video.js player
myPlayer.currentTime(120);

플레이어 API 메서드 및 이벤트의 전체 목록은플레이어 API 문서 .