0

2 つの Vimeo ビデオが埋め込まれたサイトで作業しています。2 番目のビデオを再生すると、最初のビデオが再生中の場合、最初のビデオは一時停止されます。これは美しく機能します。ただし、最初のビデオが一時停止されると、再び再生されることはありません。どんな考えでも大歓迎です！

var vimeo = {
    videos: [],
    currentVideo: null,
    init: function (element, i) {
        var videoData = {
            'title': $(element).html(),
            'id': 'video-' + i,
            'url': $(element).attr('href'),
            'width': $(element).data('width'),
            'height': $(element).data('height') 
        };
        $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData.url) + '&api=1&player_id='+ videoData.id +'&width='+ videoData.width +'&height='+ videoData.height +'&callback=?', function(data){
        $(element).html(data.html);
        $(element).find('iframe').load(function(){
                player = this;
                $(player).attr('id', videoData.id);
                $f(player)
                .addEvent('ready', function(player_id){
                    vimeo.videos.push($f(player_id));
                })
                .addEvent('play', function(player_id){
                    if (vimeo.currentVideo != null) vimeo.currentVideo.api('pause');
                    vimeo.currentVideo = $f(player_id);
                });
            });
        });
    }
}

$(document).ready(function () {
    $('a.vimeo').each(function(i) {
        vimeo.init(this, i);
    });
});
4

1 に答える 1

0

代わりに「再生」イベントでこれを試してください：

.addEvent('play', function(player_id){

                        for (var i = 0; i < vimeo.videos.length; i++) {
                            // console.log(vimeo.videos[i].element.id + '=' + $f(player_id) + '?');
                            if (vimeo.videos[i].element.id != $f(player_id).element.id) {
                                vimeo.videos[i].api('pause');
                                // console.log('paused ' + vimeo.videos[i].element.id);
                            }

                        }

                    });

最初のスクリプトは、2 つのビデオを交互に使用する限り、実際には問題なく機能しましたが、変数「currentVideo」が保持されているため、同じビデオを一時停止して再生しようとするとすぐにスタックしてしまうという問題がありました。以前に再生したビデオ、たとえそれが最初に見て一時停止したビデオであったとしても、その後すぐに再び一時停止します。

私の方法は、他のすべてのインスタンスを一時停止する少し「力ずく」かもしれませんが、私にとっては問題なく機能しているようで、一度に少数のビデオを表示しなければ、顕著なオーバーヘッドは発生しません。代わりに、NULL 以外のときに変化するだけでなく、player_id によって参照されるビデオ プレーヤーと等しくない "currentVideo" 変数を試してみることもできます。

また、Froogaloop API を使用しており、そこで少し調査を行う必要があると述べたことが参考になったかもしれません。

これが私のために働いた完全なページです：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

    <script type="text/javascript">
        var vimeo = {
        videos: [],
        currentVideo: null,
        init: function (element, i) {
            var videoData = {
                'title': $(element).html(),
                'id': 'video-' + i,
                'url': $(element).attr('href'),
                'width': $(element).data('width'),
                'height': $(element).data('height')
            };
            $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData.url) + '&api=1&player_id='+ videoData.id +'&width='+ videoData.width +'&height='+ videoData.height +'&callback=?', function(data){
            $(element).html(data.html);
            $(element).find('iframe').load(function(){
                    player = this;
                    $(player).attr('id', videoData.id);
                    $f(player)
                    .addEvent('ready', function(player_id){
                        vimeo.videos.push($f(player_id));
                    })
                    .addEvent('play', function(player_id){

                        for (var i = 0; i < vimeo.videos.length; i++) {
                            // console.log(vimeo.videos[i].element.id + '=' + $f(player_id) + '?');
                            if (vimeo.videos[i].element.id != $f(player_id).element.id) {
                                vimeo.videos[i].api('pause');
                                // console.log('paused ' + vimeo.videos[i].element.id);
                            }

                        }

                    });
                });
            });
        }
    }

    $(document).ready(function () {
        $('a.vimeo').each(function(i) {
            vimeo.init(this, i);
        });
    });
    </script>
</head>
<body>
<a class="vimeo" href="http://vimeo.com/48312847">A video</a>
<a class="vimeo" href="http://vimeo.com/41219986">Another video</a>
</body>
</html>
于 2012-10-11T15:36:41.633 に答える