5

シナリオは次のとおりです。

videoビデオで設定された要素を含むページがあります。このビデオのソースは、複数のソース（およびFlashフォールバック）を含むHTML5ビデオまたはYouTubeビデオである可能性があります。この下には、ビデオのサムネイルとして機能する多数の画像があります。1つをクリックすると、既存のMediaElementPlayerを破棄し、同じvideo要素に新しい画像を作成して、適切なビデオをロードする必要があります。

これにより、ページの読み込み時に最初のプレーヤーが作成されます。

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

そしてこれは、画像の1つがクリックされたときにプレーヤーを変更することを目的としています。

$('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;

ただ物事を壊します:)

誰か助けてもらえますか？ここでは簡単なものが欠けていると思いますので、誰かが何を指摘してくれたらとてもありがたいです！前もって感謝します。

4

5 に答える 5

2

medialementjsのメソッドを使用してremove()、要素のtypeとsrc属性を設定しvideo、ビデオタイプが変更された場合は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だけではない場合は、必要な場合にのみ再初期化するロジックを追加できます。私にぴったりです。

于 2013-08-25T20:47:45.340 に答える
1

同じ問題が発生し、mediaelementplayer（）を使用してビデオを初期化する前に、元のビデオタグhtmlを保存することになりました。ビデオを切り替えたい場合は、ビデオの親要素であるjQuery（ "parent"）。empty（）を使用して、mediaelementjsが作成した要素を破棄し、元のビデオhtmlを復元して、次を使用して再初期化します。

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

私は少しハッキーですが、仕事をします。あなたがこれを行うためのより良い方法を見つけたかどうか知りたいですか？

于 2012-07-30T02:12:08.867 に答える
1

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

プレーヤーを破壊するには：

try(){
    player.pause();
    player.remove(ture);
} catch(err) {
    console.log(err);
}
于 2015-01-30T05:05:28.023 に答える
0

同じ問題を抱えていて、このエントリに出くわした可能性のある他の人のために、ここで私自身の質問に答えます。

これを書いている時点では、私がやりたいことは私のMediaElementJSでサポートされていないことがわかりました。

私の解決策は、2つのプレーヤーを作成し、1つをHTML5 / Flashビデオ用に、もう1つをYouTubeビデオ用に使用して、必要に応じて適切なプレーヤーを表示および非表示にすることでした。

于 2012-11-30T09:02:13.860 に答える
0

MediaElementJSで再生されている現在のビデオを変更する最善の方法は、ビデオを破棄して再作成するのではなく、組み込みのビデオ「src」属性を使用してソースを変更することだと思います。

MediaElementJS APIを使用してこの「src」属性にアクセスすることは、クロスブラウザーのクロスソースの問題（たとえば、YouTubeビデオ、またはFlashフォールバック）を管理するためのより良い方法です。これが私がそれをした方法です：

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

また、このコードをMediaElementJSプラグインに変換しました。プレイリストの管理、[次へ]ボタンと[前へ]ボタン、プレイリストパネルなど、さまざまな機能が追加されます。pullRequestは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);
于 2012-11-29T08:53:22.320 に答える