2

次のコードでポップアップするFancybox2ウィンドウがあります。

var mediaElementPlayers = [];

$("#video_list_widget a.video_link").fancybox({
    padding : 0,
    width:500,
    height: 360,
    closeBtn: false,
    content: '<video width="500" height="360" controls="controls" autoplay="autoplay" preload="auto">
    <source type="video/mp4" src="http://pathtomyvideo.mp4" />

    <source type="video/webm" src="http://pathtomyvideo.webm" />

</video>',
    afterShow: function() {
        var mediaElementPlayers = [];
        $('video,audio').each(function(){
            mediaElementPlayers.push(new MediaElementPlayer(this));
            console.log(mediaElementPlayers);
        });
    },

    beforeClose: function(){
        for (var i=0; i<mediaElementPlayers.length; i++){
            console.log(mediaElementPlayers);
            mediaElementPlayers[i].pause(); // pause
            mediaElementPlayers[i].setCurrentTime(0); // rewind
        }
        $('.fancybox-inner').empty();
    },
    afterClose: function (){
        $('video').remove();
    }


});

初めてクリックするa.video_linkと、ポップアップが表示され、正常に再生されます。これをビデオ1と呼びましょう。ビデオを停止せずにライトボックスを閉じると、停止して強制終了されます。問題ない。

もう一度クリックするa.video_linkと、ポップアップして最初から始まります（これをビデオ2と呼びます）が、ビデオ1のオーディオもその上で再生されます。ビデオ2のライトボックスを閉じると、ビデオ1のオーディオが再生され続けます。ライトボックスを3回開くと、ビデオ2のオーディオも開始されます。これは継続するので、オーディオのレイヤーを互いに重ねることができます。

誰かが解決策を提案できますか？

更新： autoplay属性が削除された場合は発生しないと言えます。これは、生の<video>オブジェクトがmediaplayerjsのものにラップされる前に再生されていることを示唆しています。可能であれば、自動再生機能が本当に欲しいです。

4

1 に答える 1

0

これは単なる推測ですが、セレクターと関係があると思います。

ビデオを開いて再生すると、ページ上の他のものもトリガーされているようです - 自動再生属性は、コードの一部がページ上の他のプレイヤーをターゲットにしていないことを示すことで、実際にあなたを助けていると思いますいじりたい。

特定の要素内のオーディオ/ビデオ タグだけでなく、ページ上のすべてのオーディオおよびビデオ タグを対象とするページでグローバルに動作しているため、この行が問題になると思います。

$('video,audio').each(function(){

この行を変更して、特定のオーディオ/ビデオ タグのみをターゲットにするようにします。オーディオ/ビデオ タグと id 属性を指定するか、jQuery を使用して検索することでこれを行うことができます。動作しませんが、必要なものに近いはずです:

$(this).find('video,audio').each(function(){

お役に立てれば！

于 2012-09-04T10:52:29.710 に答える