Остановите Vimeo Video, когда другое видео работает

Мое требование состоит в том, чтобы на веб-странице было два видео... Допустим, я играю на одном из них, и через несколько минут я начинаю воспроизводить следующее. Когда я проигрываю следующее видео, первое должно остановиться. В двух словах, два видео не могут воспроизводиться одновременно, одно или другое должно быть соответственно остановлено.

До сих пор я сделал следующее.. Пожалуйста, ведите меня дальше!!!

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title></title>
   <script src="Scripts\jquery-1.5.1.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

 <script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $(document).ready(function () {
            $('iframe').each(function () {
                var vidsrc = $(this).attr('src');
                vidsrc = vidsrc + "?api=1&player_id=" + $(this).attr('id');
                $(this).attr('src', vidsrc);
            });

            $('iframe').each(function () {
                $f(this).addEvent('ready', ready);
            });
            function addEvent(element, eventName, callback) {
                if (element.addEventListener) {
                    element.addEventListener(eventName, callback, false);
                }
                else {
                    element.attachEvent('on' + eventName, callback, false);
                }
            }
            function ready(playerID) {
                $f(playerID).api('play');
                $f(playerID).addEventListener('play', play(playerID));
            }
            function play(playerID) {
                 $('iframe').each(function () {
                     if (this.id != playerID) {
                    //check if video is in play mode {
                        var vidsrc = $(this).attr('src');
                        $(this).attr('src', '');
                        $(this).attr('src', vidsrc);
                    //}
                    }
                });
            }

        });
    </script>
</head>
<body>
    <iframe id="player1" class='vimeo' src="http://player.vimeo.com/video/7100569" width="500" height="281" frameborder="0"></iframe>
    <iframe id="player2" class='vimeo' src="http://player.vimeo.com/video/240975" width="500" height="281" frameborder="0"></iframe>
</body>
</html>
Источник

1 ответ

В любом случае, только одно видео должно воспроизводиться одновременно. Проигрыватель Vimeo знает, как остановить другой видеопроигрыватель, если он играет.

Вы можете просто включить сами фреймы:

<iframe id="player1" class='vimeo' src="http://player.vimeo.com/video/7100569" width="500" height="281" frameborder="0"></iframe>
<iframe id="player2" class='vimeo' src="http://player.vimeo.com/video/240975" width="500" height="281" frameborder="0"></iframe>

Вот демо без лишних js http://jsfiddle.net/wvk9eom3/1/

Источник
Другие вопросы по тегам