이미 존재하는 MediaElementPlayer를 얻는 방법

Question

내 페이지에 $('#video-id').medialementplayer(options)을 사용하여 <video> 요소에 대해 MediaElementPlayer를 만들었습니다. 이 요소는 (display: none을 사용하여) 숨겨져 있으며 jQuery UI를 사용하여 모달 대화 상자로 바뀝니다.

이 대화 상자에서 열기/닫기 이벤트를 바인드하여 palyer를 시작/일시 중지하려고합니다. $(...).dialog(options)을 처리하는 스크립트는 $(...).medialementplayer(options)을 처리하는 스크립트와 구분되며 생성 된 MediaElementPlayer에 액세스 할 수 없습니다. 나는 순수 HTML5 비디오 요소를 사용하는 경우

, 나는 $('video', dialogContentElement).get(O)를 사용하여 플레이어를 검색 할 수 있습니다,하지만 난 MediaElement.js을 사용하고 이후 실제 플레이어를 검색하기 위해이 방법에 의존 할 수 없다.

는 MediaElement.js가 <video> 또는 <audio> 요소에 대한 기존의 MediaElementPlayer (또는 MediaElement에) 인스턴스를 검색 할 수있는 방법을 제공합니까? 아니면 내 자신의 플레이어를 관리해야합니까 레지스트리?

Answer 1

MediaElement를 초기화하는 직선 JQuery 함수 외에도 나중에 ME를 var로 초기화하여 나중에 the API을 사용할 수 있습니다. .dialog (옵션) 스크립트가 MediaElement에 스크립트에서 분리되어 있기 때문에

var player = new MediaElementPlayer('video', 
    {defaultVideoWidth:960, defaultVideoHeight:410, 
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) { ... } 
    }); 

// then bind the modal window's open and close callback function to the API: 
// code below from the JQuery UI documentation at **http://docs.jquery.com/UI/Dialog** 

$(".selector").dialog({ 
    open: function(event, ui) { player.play(); }, 
    close: function (event, ui) { player.pause(); } 
}); 

, 당신은 var player 글로벌, 또는 적절하게 .dialog() 초기화를 둘러싼 함수에 전달되어 있는지 확인해야한다.

---

이 답변은 Matt Bergsma에서 a post을 기반으로합니다.

Answer 2

내가 할 수없는 플레이어가 "새로운 MediaElementPlayer"방법을 (단지의 jQuery 방법은 나를 위해 작동) 작동하도록, 그래서 라이브러리가 mejs.players 배열에 선수 추가하는 사실에 의존 해킹 고안 :

를

$('#my-video-id'). 
    mediaelementplayer(myopts). 
    data('MEP',mejs.players[mejs.players.length-1]); 

// ... 

$('#my-video-id').data('MEP').play(); 

플레이어를 하나씩 (정확히 하나의 요소가있는 jQuery 개체에서) 만들면 작동합니다. 또는이 (안된)과 같은 위험을 감수 할 수 :

var n = mejs.players.length; 

$(myselector).mediaelementplayer(myopts).each(function(k,elt){ 

    $(elt).data('MEP',mejs.players[n+k]); 
}); 

// ... 

$('#my-video-id').data('MEP').pause(); 

Answer 3

나는 샘플 코드 아래의 몇 가지 다른 비트를 제거했지만 우리가 mediaelements.js 사용에 대한 이동 방법이 본질적이다. 비디오 플레이어가 초기화 된 후에는 비디오 플레이어를 제어 할 수 있습니다.

이 우리가하는 일입니다 : 다음

var videoPlayer; 

$(function() { 
    var whatever = $('#videoPlayer').mediaelementplayer({ 
     success: function (player, node) { 
      videoPlayer = player; 
     } 
    }); 
}); 

나중에 우리가 프로그래밍 기본적으로이 사용 플레이 영상을 설정, 일시 정지를

var vidArray = [{ src: "/media/vid.mp4", type: 'video/mp4' }]; 
videoPlayer.setSrc(vidArray); 
videoPlayer.play(); 

videoPlayer 재생 우리에게 비디오 플레이어에 액세스 할 수 있습니다, 변경 등.

그러나 우리가 당황하게 만든 비트는 HTML 마크 업에 소스 요소가 없으면 작동하지 않는다는 것입니다. 그것 없이는 모든 종류의 이상한 오류를 보았습니다. 예 :

<video id="videoPlayer" width="100%" height="100%"> 
    <source src="/media/default.mp4" type="video/mp4" /> 
</video> 

동영상 플레이어를 완전히 제어 할 수 있어야합니다.

희망이 도움이됩니다.

Answer 4

당신은 내가 mejs.players.length를 얻을 수

var player = new MediaElementPlayer('#player'); 

player.pause(); 

player.play();