Jak skutecznie zniszczyć MediaElementPlayer i stworzyć nową

Question

Oto scenariusz:

Mam stronę, która zawiera video elementu, która jest tworzona z wideo. Źródłem tego filmu może być wideo HTML5 z wieloma źródłami (i awarią Flash) lub filmem z YouTube. Poniżej znajduje się kilka obrazów, które służą jako miniaturki wideo, kliknięcie jednego z nich powinno załadować odpowiedni film, niszcząc istniejący MediaElementPlayer i tworząc nowy na tym samym elemencie video.

Stwarza to początkowy odtwarzacza na stronie obciążenia:

$('video').mediaelementplayer({ alwaysShowControls: true }); 

I to ma na celu zmienić odtwarzacz, gdy jeden z obrazów kliknięciu:

$('video').mediaelementplayer({ 
    alwaysShowControls: true, 
    success: function(media, dom, player) { 
     console.log('success!'); 
    }, 
    error: function() { 
     console.log('error!'); 
    } 
}); 

Ale to nie działa. Funkcja success nigdy nie jest wprowadzana (ani nie jest to error) i nic się nie dzieje.

Chyba biblioteka nadal uważa, że ​​oryginalny gracz istnieje lub coś, i próbowałem wielu rzeczy, aby spróbować i powiedzieć to, że nie jest to przypadek, na przykład:

mejs.meIndex = 0 
mejs.players = [] 

na NIE efekt, a ustawienie:

window.mejs = null; 
window.MediaElementPlayer = null; 
window.MediaElement = null; 

Wystarczy łamie rzeczy :)

Może ktoś tam pomóc? Jestem pewien, że brakuje mi tutaj czegoś prostego, więc byłbym bardzo wdzięczny, gdyby ktoś mógł wskazać, co! Z góry dziękuję.

Answer 1

mam zamiar odpowiedzieć na moje własne pytanie tutaj dla każdego, kto może mieć ten sam problem i natknąć się na ten wpis.

Okazuje się, że to, co chcę zrobić, nie jest obsługiwane przez moje MediaElementJS w chwili pisania tego.

Moim rozwiązaniem było utworzenie dwóch graczy i użycie jednego dla filmów HTML5/Flash, a drugiego dla filmów z YouTube, pokazanie i ukrycie odpowiedniego, stosownie do potrzeb.

Answer 2

Miałem ten sam problem i zakończyłem przechowywanie oryginalnego tagu wideo html przed zainicjowaniem wideo za pomocą mediaelementplayer(). Gdy chcę włączyć film I jQuery („jednostka dominująca”) empty() elementem dominującym w filmie niszcząc elementy mediaelementjs utworzone, a następnie przywrócić oryginalną html wideo i przeładowania użyciu.

$("#video").mediaelementplayer({ 
    pauseOtherPlayers: false 
}); 

Ugryzłem hacky ale wykonuje to zadanie. Chciałbym wiedzieć, czy znalazłeś lepszy sposób na zrobienie tego?

Answer 3

Uważam, że najlepszym sposobem na zmianę aktualnie odtwarzanego wideo jest MediaElementJS, aby go nie zniszczyć i ponownie utworzyć, ale aby użyć wbudowanego atrybutu "src" do zmiany źródła.

Korzystanie z interfejsu API MediaElementJS w celu uzyskania dostępu do tego atrybutu "src" jest lepszym sposobem na rozwiązywanie różnych problemów z różnymi źródłami w różnych przeglądarkach (na przykład w przypadku filmów z YouTube lub w postaci zastępczej Flasha). Oto sposób robiłem go:

player.pause(); 
player.setSrc(myNewSourceURL); 
player.load(); 

ja również okazały ten kod do wtyczki MediaElementJS, będzie dużo miłych rzeczy wokół, takich jak zarządzanie listy odtwarzania, następnego i przycisków prev i panelem listy odtwarzania. Możesz znaleźć the pullRequest on github.

Oto przykład kodu zbudować odtwarzania:

new MediaElementPlayer('#myvideo', { 
    features : ['prev','playpause','next', 'progress'], 
    success : function(mediaElement, domObject){ 
     domObject.player.loadPlaylist([ 
      {src: "http://domain.com/video/video1.mp4"}, 
      {src: "http://domain.com/video/video2.mp4"}, 
      {src: "http://domain.com/video/video3.mp4"}, 
     ]); 
    } 
}); 

Wtedy, gdy kliknięciu miniatur:

var index = 2; // calculate the item index in the playlist 
player.setItem(index); 

Answer 4

Można użyć metody medialementjs remove(), ustawić atrybut type i src elementu video, a następnie ponownie zainicjować mediaelementjs, jeśli typ wideo się zmienił.

może wyglądać mniej więcej tak:

function setSource(url, type) { 
    var vid = $('#video').first(); 
    if (vid.attr('type') != type) { 
     vid.get(0).player.remove(); 
     vid.attr('type', type).attr('src', url); 
     vid.mediaelementplayer({ 
      success: function(media, dom, player) { 
       player.play(); 
      } 
     }) 

    } 
} 

Jeżeli to nie tylko youtube mp4 i można dodać dodatkowe logiki tylko Reinitialize gdy są potrzebne. Działa idealnie dla mnie.

Answer 5

Jeśli chcesz zmienić różne typy wideo src, musisz zniszczyć odtwarzacz i utworzyć nowy.

zniszczyć zawodnik:

try(){ 
    player.pause(); 
    player.remove(ture); 
} catch(err) { 
    console.log(err); 
}