に成功MediaElementPlayerを破壊し、新しいもの

Question

を作成する方法ここではシナリオです。この動画のソースは、複数のソース（およびFlashフォールバック）またはYouTube動画を含むHTML5動画です。 この下には、ビデオサムネイルとして機能するいくつかの画像があります。既存の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 = [] 

NOに効果、及び設定：

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

は物事を壊し:)

そこに誰が助けることはできますか？私は誰かが何を指摘できるかどうか私は非常に感謝するだろうので、私はここに簡単なものが欠けていると確信しています！前もって感謝します。

Answer 1

を私は他の誰のために、ここで自分の質問に答えるつもりです。ここ

は、プレイリストを構築するためのコード例です同じ問題を抱えているかもしれません。

私がしたいことは、これを書いている時点でMediaElementJSをサポートしていないことが判明しました。

私のソリューションは、2人のプレイヤーを作成し、HTML5/Flashビデオ用とYouTubeビデオ用の2つのプレーヤーを作成し、必要に応じて適切なものを表示して隠すことでした。

Answer 2

私は同じ問題を抱え、mediaelementplayer（）を使用してビデオを初期化する前に元のビデオタグhtmlを保存することになりました。私はjQueryの（「親」）の映像を切り替えたい場合は、空の（）作成された要素のmediaelementjsを破壊するビデオの親要素、そして使用したオリジナルビデオhtmlと再初期化を復元：。

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

私はハックビット仕事をしています。私はあなたがこれを行うより良い方法を見つけたかどうか知りたいですか？

Answer 3

私はMediaElementJSで再生される現在のビデオを変更する最良の方法は、それを破壊して再作成するのではなく、ビルトインのビデオ "src"属性を使用してソースを変更することだと思います。

この「src」属性にアクセスするためにMediaElementJS APIを使用すると、ブラウザ間のクロスソースの問題（YouTubeビデオやFlashフォールバックなど）を管理するためのより良い方法です。ここで私はそれをやった方法です：、私もMediaElementJSプラグインにこのコードを有効にしている

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

意志の周りに次のプレイリストの管理、および前のボタン、およびプレイリストパネルのような素敵なものがたくさん。 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

medialementjsのremove()メソッドを使用し、videoエレメントのtypeおよびsrc属性を設定し、ビデオタイプが変更された場合はmediaエレメントjsを再初期化できます。

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とユーチューブを持っていない場合は、必要なときだけ再初期化するロジックを追加することができます

はこのような何かを見ることができます。私にとって完璧な作品です。

Answer 5

異なるタイプのビデオsrcを切り替える必要がある場合は、プレーヤーを破棄して新しいプレーヤーを作成する必要があります。

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