2012-06-29 85 views
5

這裏的情景:如何成功摧毀一個MediaElementPlayer,並創建一個新的

我有一個包含被設置了一個視頻video元素的網頁。此視頻的來源可能是包含多個來源(以及Flash後備)的HTML5視頻或YouTube視頻。 下面是一些用作視頻縮略圖的圖像,通過銷燬現有MediaElementPlayer並在同一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; 

剛剛打破的東西:)

任何人都可以在那裏幫助?我確信我在這裏錯過了一些簡單的東西,所以如果有人能指出什麼,我會非常感激!提前致謝。

回答

0

我要在這裏回答我的問題了誰比誰可能會遇到同樣的問題,並且偶然發現此條目。

事實證明,我想要做的是不支持我的MediaElementJS在撰寫本文時。

我的解決方案是創建兩個播放器,一個用於HTML5/Flash視頻,另一個用於YouTube視頻,根據需要顯示並隱藏相應的播放器。

0

我有同樣的問題,並最終在使用mediaelementplayer()初始化視頻之前存儲原始視頻標記html。當我想切換視頻我的jQuery(「母公司」)空()的視頻破壞mediaelementjs創建的所有元素的父元素,然後使用還原原始視頻html和重新初始化:

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

我有點哈克但是完成這項工作。我很想知道你是否找到了更好的方法來做到這一點?

0

我認爲最好的方式來改變當前播放的視頻是MediaElementJS不是銷燬它並重新創建它,而是使用內置視頻「src」屬性來更改源。

使用MediaElementJS API訪問此「src」屬性是更好的方式來管理跨瀏覽器的跨源問題(例如YouTube視頻或Flash後備)。這是我做過的方式:

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

我也把這個代碼放到一個MediaElementJS插件,將有很多的好東西像周圍的播放列表管理,Next和Prev按鈕和播放列表面板。你可以找到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); 
+0

當你想這不工作的HTML5視頻源和YouTube視頻之間切換。圖書館的創建者確認不支持這種開關。 –

2

您可以使用medialementjs的remove()方法,設置video元素的類型和src屬性,然後在視頻類型發生更改時重新初始化mediaelementjs。

可能是這個樣子:

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和YouTube,你可以在需要的時候只有重新初始化添加額外的邏輯。對我來說很完美。

+1

而不是'remove()'你的代碼示例調用'destroy()'(mediaelement.js不支持) – schellmax

+0

你是對的,謝謝你的提示。修復它在我的答案。 – Nic

+0

+1用於維護;) – schellmax

1

如果您需要切換不同類型的視頻src,您需要銷燬播放器並創建一個新的。

摧毀球員:

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