Остановить YouTube видео с JQuery?

Question

У меня есть созданный мной ползунок jquery, в основном только три панели, которые скользят, применяя отрицательные левые CSS-значения. Прекрасно работает, но у меня есть видео на одном слайде YouTube, которое не останавливается, когда я слайд. Я пробовал display: none и Visibility: hidden, который работает во всех браузерах, кроме IE, в IE звук продолжается.

Есть ли простой способ убить видео с помощью jquery?

Answer 1

Это работает для меня как на YouTube, так и на Vimeo плеерах. Я просто сбрасываю атрибут src, поэтому помните, что видео вернется к началу.

var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src');

$theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing

$ theArticleDiv - это контейнер моего текущего видео - так как у меня есть несколько видео на странице, и они показываются через просмотр Drupal во время выполнения, я понятия не имею, какими будут их идентификаторы. Поэтому я связал событие «muy click» с видимым в данный момент элементом, нашел его родительский элемент и решил, что это $ theArticleDiv.

('. Views-field-field-video-1 iframe') находит для меня текущее видео iframe - в частности, то, которое видно сейчас. Этот iframe имеет атрибут src. Я просто поднимаю это и сбрасываю обратно обратно к тому, что уже было, и автоматически видео останавливается и возвращается к началу. Если мои пользователи хотят сделать паузу и возобновить работу, они, конечно, могут сделать это, не закрывая видео - но, честно говоря, если они действительно закрывают видео, я чувствую, что они могут смириться с тем фактом, что оно сброшено к началу.

НТН

Answer 2

Ну, есть гораздо более простой способ сделать это. Когда вы захватите ссылку для вставки видео на YouTube, прокрутите немного вниз, и вы увидите несколько вариантов: iFrame Embed, Использовать старые вставки, связанные видео и т. д. Там выберите Использовать старую ссылку для вставки. Это решает проблему.

Answer 3

На самом деле вам нужен только javascript и правильно встроите видео на YouTube с помощью swfobject google library

Это пример

<script type="text/javascript" src="swfobject.js"></script>    
<div style="width: 425; height: 356px;">
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>      
  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
  </script>
</div> 

После этого вы можете вызвать следующие функции:

ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.pauseVideo();
ytplayer.stopVideo();

Answer 4

Я получил это для работы во всех современных браузерах, включая IE9 | IE8 | IE7. Следующий код откроет ваше видео на YouTube в модальном диалоговом окне пользовательского интерфейса jQuery, автоматически воспроизведет видео с 0:00 при открытии диалога и остановит видео при закрытии диалога.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>    

<script type="text/javascript">

    google.load("swfobject", "2.1");

    function _run() {
        /* YouTube player embed for modal dialog */
        // The video to load.
        var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1",
                       "videoDiv", "879", "520", "9", null, null, params, atts);
    }
    google.setOnLoadCallback(_run);

    $(function () {
        $("#big-video").dialog({
            autoOpen: false,
            close: function (event, ui) {
                ytPlayer.stopVideo() // stops video/audio on dialog close
            },
            modal: true,
            open: function (event, ui) {
                ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video
            }
        });

        $("#big-video-opener").click(function () {
            $("#big-video").dialog("open");
            return false;
        });

    });
</script>

<div id="big-video" title="Video">
    <div id="videoDiv">Loading...</div>
</div>

<a id="big-video-opener" class="button" href="#">Watch the short video</a>

Answer 5

Просто так.

включает следующую строку в функцию для закрытия всплывающего окна.

$('#youriframeid').remove();

Answer 6

, если вы используете иногда playerID.stopVideo (); не работает, вот трюк,

 function stopVideo() {
           playerID.seekTo(0);
    playerID.stopVideo();
}