임베디드 JWPlayer 제어

Question

저희 회사의 클라이언트는 비디오 컨텐츠 ​​용 JWPlayer를 사용합니다. 하나가 액세스 할 수있는 곳에서 JWPlayer 코드가

<iframe src="http://video.CLIENTWEBSITE.com/players/MEDIAID-PLAYERID.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style=”position:absolute;”></iframe> 

임베드의 소스 링크 (분명한 이유 편집) : 우리의 SaaS 플랫폼에 통합하기 위해, 우리는 그들이 제공 한 코드를 사용하여 콘텐츠를 내장하고 있습니다 Javascript API를 사용하여 재생, 일시 정지 등을 할 수 있습니다. JWPlayer API에 대한 참조를 포함 할 수있는 방법을 찾고 있습니다. 그래서 jwplayer 객체를 직접 (API 문서에 나와있는 것처럼) 인스턴스화 할 수 있습니다. postMessage와 같은 의사 소통을 통해 임베디드 페이지에 명령을 보냅니다. API 문서와 StackOverflow를 검색했지만 답변을 찾을 수 없습니다. 누구도 전에 이것을 보았습니까?

감사합니다.

Answer 1

JW 플랫폼 호스트 플레이어를 삽입하는 IFRAME 방법을 사용하면 기본적으로 부모 페이지에서 해당 JW Player/API와 상호 작용할 수있는 옵션이 간단한 "재생"및 "일시 중지"요청으로 제한됩니다.

이러한 요청은 "postMessage"교차 프레임 메시징 기술을 사용하여 iframe으로 보낼 수 있지만 다음은 현재 제공되는 "수신기"뿐입니다. 자산을 가정

/** Used to pass play/pause messages parent iframe via postMessage **/ 
window.addEventListener("message", function(evt) { 
    switch (evt.data) { 
    case "play": 
     jwplayer().play(true); 
     break; 
    case "pause": 
     jwplayer().pause(true); 
     break; 
    } 
}); 

는 JW 플랫폼에 링크되고, 당신의 가능성 더 좋은 방법은 부모 페이지가 아닌 IFRAME의 삽입에 포함 직접 JS를 사용하는 것입니다.

이 간단한은 ".html 중에서"을 "은 .js"에서 사용되는 URL의 확장자를 변경하고 IFRAME 대신 SCRIPT 태그를 사용하는 것 :

<script src="http://video.CLIENTWEBSITE.com/players/MEDIAID-PLAYERID.js"></script> 

이 페이지에서 플레이어를 인라인으로 렌더링 JW Player & API에 대한 모든 액세스 권한을 제공합니다. 플레이어가 JW 대시 보드에서 구성되는 방법에 따라 크기 조정을 제어하기 위해 추가 가구에 포장해야 할 수도 있습니다.