MediaElement.js Video kaynağını onclick üzerinde değiştirin

Question

MediaElement.js'de "çoklu" video oynatıcı yapmaya çalışıyorum. Az ya da çok, küçük resimlerin, kullanıcının kaynağını tıkladığı videonun kaynağını değiştireceğine inanıyorum.

başarıyla

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

kullanarak HTML5 kaynağı için yapmış AMA bu sadece HTML5 oynatıcı için çalışmalar olup Flaş geri düşer. Temel video etiketini kullanıyorum ve mediaelement.js'nin geri dönüş işini yapmasına izin veriyorum. Yukarıdaki örnekte olduğu gibi kaynağı değiştirmenin işe yarayacağını düşündüm ama değil.

Bir sonraki görüntü seçildiğinde videonun durmasını ve diğerine geçmesini ve bunun tersini de Flash player'ın yedeği ile istiyorum.

Bunu yapmanın kolay bir yolu var mı? Mediaelement.js öğelerini kullanarak videoların dinamik olarak nasıl değiştirileceğiyle ilgili çok fazla doküman görmedim.

Herhangi bir öneri büyük takdir.

Answer 1

Sadece video dosyasının kaynağını değiştiremezsiniz. Mejs div'i kaldırmanız, yeni bir html5 videosu oluşturmanız ve ardından mediaelement'i tekrar çağırmanız gerekiyor. Bu işlemi tekrarlayarak, gerektiğinde her video için yeni bir flash yedeklemesi oluşturuyorsunuz demektir.

Answer 2

Oynatıcıyı API ile kullanıyorsanız, "setSrc" yöntemini kullanabilirsiniz.

Örnek:

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

// ... sometime later 

player.setSrc('urlToVid.mov'); 
player.play(); 
</script> 

Answer 3

src şöyle .. değiştirildi edildikten sonra medya nesnesini yüklemek için benim için çalıştı

: Bu yana

var player = new MediaElementPlayer('#vid'/*, Options */);   

$('#the_url').on('keypress',function(e){  
    if (e.which == 13) { 
     player.pause(); 
     player.setSrc($('#the_url').val());   
     player.media.load(); 
    } 
}); 

Answer 4

benim için çok fazla zaman almıştır anlamaya, burada bulduğum şeyi yayınlayacağım. MediaElementJS Wordpress eklentisini kullandım. kaynağını değiştirmek için, böyle medya öğesi oyuncuya bir başvuru alabilirsiniz:

$('#wp_mep_1')[0].player.media 

Bunu yapmanın nedeni WordPress eklentisi size .load() gibi işlevleri çağırmak için bir değişken vermez çünkü veya .play() açık. Sonunda, eklenti tarafından eklenen oynatıcıya nasıl referans alacağınız olduğunu anladım.

Yani src değiştirmek için:

var player = $('#wp_mep_1')[0].player.media; 
if(player.setSrc) 
    player.setSrc('xyz.mp4'); 

Answer 5

Eski sonrası - Benim çözünürlük

Not eklemek düşündüm: load() da videoyu otomatik oynayacak çağıran. Bu kod ayrıca, girişinizin oradaki bir değere sahip olduğunu ve tıklanan bağlantı etiketinin alt öğesi olduğunu varsayar.

$('#idThatSwitches').click(function (e) { 
    // get youTubeId 
    var youTubeId = $(this).find('input[type="hidden"]').val(); 

    // switch out player's video source and reload 
    var player = $('#idOfYourPlayer')[0].player.media; 
    player.setSrc('http://youtube.com/watch?v=' + youTubeId); 
    player.load(); 
}); 

Answer 6

Eski bir soruyu yeniden diriltme konusundaki sıramı alacağım.

bazı kısmen çalıştı ve bazı hiç işe yaramadı, bir şey MediaElement eklenti değişti olmadığından emin değilim, ama Yukarıdaki çözüm hiçbiri bana% 100 çalıştı. Karşılaştığım sorunların bir kısmı, daha önce bir video yüklü ve oynatılmayan bir video olmasaydı, sadece bir öğeye video yükleyebildim, bu bir çalma listesi seçicisi olarak kullanılması gerektiği için benim için iyi değildi. diğer sorun, video tüm yol yüklemek ve sadece birkaç saniye dur.

aşağıda Ancak benim için çalışıyor Eki '15 itibariyle olmaz Sebebi ne olursa olsun oldu.

<a href="http://www.youtube.com/watch?v=VIDEO-ID" onclick=" 
    playerObject.pause(); 
    playerObject.setSrc(this.href); 
    playerObject.media.load(); 
    playerObject.load(); 
    return false 
"> 
<img src="yourimg"> 
</a> 

böyle tıklanabilir nesneleri biçimlendirme ile bana yardımcı olmak için bir Tage kullanmak ister, ayrıca yeni bir pencere/sekme işlevlerinde açık korur.