0

我正在一个有两个嵌入式 Vimeo 视频的网站上工作。当你播放第二个视频时，如果第一个正在播放，第一个将被暂停。这很好用。但是，一旦第一个视频暂停，它将不会再次播放。任何想法都非常感谢！

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);
                            }

                        }

                    });

只要您在两个视频之间交替播放，您的初始脚本实际上对我来说就很好 - 但问题是，一旦您尝试暂停并播放相同的视频，它就会卡住，因为您的变量“currentVideo”持有之前播放的视频，即使它是您观看并暂停的第一个视频，然后会立即再次暂停。

我的方法可能有点“蛮力”，暂停所有其他实例，但它似乎对我来说工作正常，并且如果您一次不显示多个视频，则不应造成明显的开销。但是，您可能会尝试使用“currentVideo”变量，该变量不仅在不为 NULL 时会发生变化，而且也不等于 player_id 引用的视频播放器。

此外，提到您正在使用 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 回答