Question

我正在开发一个包含两个嵌入式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);
    });
});

Answer 1

请尝试使用“play”事件：

.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>

Vimeo API - 暂停的视频无法再播放

1 个答案: