개요: 플레이어 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 문서 .