कैसे सफलतापूर्वक एक MediaElementPlayer को नष्ट करने और एक नया एक

Question

बनाने के लिए यहाँ परिदृश्य है। इस वीडियो का स्रोत कई स्रोतों (और फ्लैश फ़ॉलबैक) या YouTube वीडियो के साथ HTML5 वीडियो हो सकता है। इसके नीचे कई छवियां हैं जो वीडियो थंबनेल के रूप में कार्य करती हैं, मौजूदा मीडियाइलेमेंटप्लेयर को नष्ट करके और उसी video तत्व पर एक नया निर्माण करके, उचित वीडियो लोड करना चाहिए।

यह पृष्ठ लोड पर प्रारंभिक खिलाड़ी बनाता है:

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

और यह जब छवियों में से एक पर क्लिक किया जाता खिलाड़ी को बदलने के लिए करना है:

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

लेकिन यह काम नहीं करता। success फ़ंक्शन कभी दर्ज नहीं किया गया है (न तो error है) और कुछ भी नहीं होने वाला प्रतीत होता है।

मुझे लगता है कि पुस्तकालय अभी भी सोचता है कि मूल खिलाड़ी मौजूद है या कुछ और, और चीजों की कोशिश करने और यह बताया है कि यह स्थिति नहीं है, उदाहरण के लिए के एक नंबर की कोशिश की है:

mejs.meIndex = 0 
mejs.players = [] 

नहीं करने के लिए

प्रभाव, और सेटिंग:

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

बस बातें :)

किसी को भी वहाँ बाहर मदद कर सकते हैं टूट जाता है? मुझे यकीन है कि मैं यहाँ कुछ आसान याद कर रहा हूं इसलिए अगर कोई यह बता सके कि मैं क्या कर सकता हूं तो मैं बहुत आभारी हूं! अग्रिम में धन्यवाद।

Answer 1

मैं यहाँ और कौन किसी के लिए अपने खुद के सवाल का जवाब देने जा रहा हूँ इस प्रविष्टि में एक ही समस्या हो सकती है और ठोकर खा सकती है।

यह पता चला है कि मैं जो करना चाहता हूं वह इसे लिखने के समय मेरे MediaElementJS का समर्थन नहीं करता है।

मेरा समाधान दो खिलाड़ियों को बनाना था और एचटीएमएल 5/फ्लैश वीडियो के लिए और दूसरा यूट्यूब वीडियो के लिए इस्तेमाल करना था, जो आवश्यकतानुसार उपयुक्त और दिखा रहा था।

Answer 2

मुझे एक ही समस्या थी और मीडियालेमेंटप्लेयर() का उपयोग कर वीडियो शुरू करने से पहले मूल वीडियो टैग एचटीएमएल संग्रहित करना समाप्त हो गया। मैं वीडियो स्विच करना चाहते हैं मैं jQuery ("जनक") खाली() वीडियो तत्वों mediaelementjs बनाया नष्ट करने की मूल तत्व है, तो का उपयोग कर मूल वीडियो एचटीएमएल और reinitialise बहाल:।

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

मैं hacky सा लेकिन नौकरी करता है। मुझे यह जानने में दिलचस्पी है कि क्या आपको ऐसा करने का बेहतर तरीका मिला है?

Answer 3

मुझे लगता है कि वर्तमान वीडियो को बदलने का सबसे अच्छा तरीका है MediaElementJS इसे नष्ट करना और इसे फिर से बनाना नहीं है, लेकिन स्रोत को बदलने के लिए अंतर्निहित वीडियो "src" विशेषता का उपयोग करना है।

इस "src" विशेषता तक पहुंचने के लिए MediaElementJS API का उपयोग करना क्रॉस-ब्राउज़र क्रॉस-स्रोत समस्याओं (उदाहरण के लिए YouTube वीडियो के लिए, या फ़्लैश फ़ॉलबैक) का प्रबंधन करने का बेहतर तरीका है। यहाँ जिस तरह से मैं इसे किया है है:

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

मैं भी एक MediaElementJS प्लगइन इस कोड बदल दिया है होगा चारों ओर प्लेलिस्ट प्रबंधन, अगले और पिछले बटन, और एक प्लेलिस्ट पैनल की तरह अच्छा बहुत कुछ। आप the pullRequest on github पा सकते हैं।

यहाँ एक कोड उदाहरण है एक प्लेलिस्ट का निर्माण करने की:

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"}, 
     ]); 
    } 
}); 

तब, जब एक थंबनेल क्लिक किया जाता है:

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

Answer 4

आप remove() medialementjs की विधि का उपयोग कर सकते हैं, अपने video तत्व के प्रकार और स्रोत विशेषता सेट करें और फिर वीडियो प्रकार बदल गया है तो मीडियालेमेंटज को फिर से शुरू करें।

कुछ इस तरह दिखाई जा सका:

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(); 
      } 
     }) 

    } 
} 

आप केवल mp4 नहीं है, तो और यूट्यूब आप केवल reinitialize जब जरूरत के लिए अतिरिक्त तर्क जोड़ सकते हैं। मेरे लिए सही काम करता है।

Answer 5

यदि आपको विभिन्न प्रकार के वीडियो स्रोत स्विच करने की आवश्यकता है, तो आपको प्लेयर को नष्ट करने और एक नया निर्माण करने की आवश्यकता है।

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