Использование функции переключения JQuery, чтобы показать / скрыть YouTube, но не может заставить его перестать играть на скрытии - PullRequest
Новая
       24

Использование функции переключения JQuery, чтобы показать / скрыть YouTube, но не может заставить его перестать играть на скрытии

1 голос
/ 20 октября 2011

Я использую функцию jquery для переключения элемента видео YouTube на моем сайте.Он отлично работает и показывает / скрывает его по мере необходимости.Однако я не могу найти способ остановить воспроизведение видео при сокрытии div.Я продолжаю читать об уничтожении элемента, а затем вызывать его при переключении, но я не знаю достаточно о коде, чтобы знать, как и где это сделать в функциях переключения.Любая помощь будет потрясающей.Я добавил свой код ниже 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


        .vidblock
        {
            background:#ccc;
            width:430px;
            height:320px;
            display:none;
        }

    </style>

    <script type="text/javascript">

        $(document).ready(function(){

            $('.toggle').click(function(){
                $('.vidblock').toggle("slow");
            });

        });

    </script>

и 

<h3><a href="#" class="toggle">Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</a></h3>

Ответы [ 3 ]

2 голосов
/ 08 августа 2012

Хорошо! Это заняло у меня немного времени, чтобы понять, и когда я скажу вам, это будет иметь смысл.

Убедитесь, что вы звоните API YouTube: 

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

Когда вы скрываете div, используйте jquery, чтобы изменить источник видео на то же видео, без использования автозапуска. Это останавливает воспроизведение видео, а также устанавливает его обратно.

Еще одна интересная вещь, которую я обнаружил, - при открытии div я включил автозапуск.

Вы можете увидеть демо на этой странице: http://advantageanywhere.com/index.aspx?sid=250 Нажмите на ссылку воспроизведения, и он откроет лайтбокс (аналогично тому, что вы делаете, показывая и скрывая элемент div. В исходном состоянии он находится там, пока он скрыт как обычная ссылка для встраивания. После щелчка мышью он превращается в Автовоспроизведение, затем при нажатии клавиши escape или X он закрывает лайтбокс, а также возвращает видео к обычному встраиванию (останавливает воспроизведение)

Возьмем, к примеру, следующее видео: Исходный код для вставки из YouTube [добавление идентификатора AN (youtube) к нему для таргетинга в jquery и парм для API YouTube (?enablejsapi=1)]:

Вот как вы должны начать изображение в скрытом div.

После открытия div вам понадобится jquery: 

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */

Теперь, когда div скрыт, вам нужен jquery: 

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */

Ниже приведен весь скрипт, который я настроил. Я пытался бросить это вместе для вас в скрипке, но у меня сейчас нет времени и просто наткнулся на ваш вопрос, когда я пытаюсь уложиться в крайний срок.

Если у вас есть другие вопросы, я не против помочь, пожалуйста. 

$(window).load(function(){
    var KEYCODE_ESC = 27;
    $(document).keyup(function(e) {
        if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }  
    });

    function closeLightBox() {
         $("#lb1, #lb4").fadeOut();
         $("#featureContent, #videoContent").hide();
         $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
    }           
     /* ------------   Light Box 4 Video ------------- */

    var lightBox4 = $('#lb4'),
    videoContent = $('#videoContent');

    $('#anywhereVideo').click(function() {
        lightBox4.fadeIn(function() {
            videoContent.show(); 
                $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */

        });

    });


    $('#close4').click(function() {
        closeLightBox();

    });   
    });
0 голосов
/ 20 октября 2011

Вам не нужно уничтожать элемент, просто используйте API JavaScript YouTube (http://code.google.com/apis/youtube/js_api_reference.html), чтобы приостановить или остановить видео.

Вы даете объекту playerapiid, затем вы можете нацелить его на JavaScript.

0 голосов
/ 20 октября 2011

Вы можете использовать ' detach ' - 

$(function() {
    var savedNodes;

    $('.toggle').toggle(function() {
        $('.vidblock').hide('slow', function() {
            savedNodes = $('yourplayerid').detach();
        });
    }, function() {
        $('.vidblock').append(savedNodes)
        $('.vidblock').show('slow');
    });

});

Демо - http://jsfiddle.net/Sf4LT/2/

...