Как приостановить проигрыватель YouTube при скрытии фрейма?

Question

У меня есть скрытый div, содержащий видео YouTube в <iframe>.Когда пользователь нажимает на ссылку, этот div становится видимым, тогда пользователь должен иметь возможность воспроизводить видео.

Когда пользователь закрывает панель, воспроизведение видео прекращается.Как мне этого добиться?

Код:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Answer 1

Самый простой способ реализовать это поведение - вызывать методы pauseVideo и playVideo, когда это необходимо.Вдохновленный результатом моего предыдущего ответа , я написал функцию без плагинов для достижения желаемого поведения.

Единственные корректировки:

• Я добавилфункция, toggleVideo
• Я добавил ?enablejsapi=1 к URL YouTube, чтобы включить функцию

Демонстрация: http://jsfiddle.net/ZcMkt/
Код:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

Answer 2

Вот ответ JQuery на ответ RobW для использования скрытия / приостановки iframe в модальном окне:

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

Упомянутыми html-элементами являются сам модальный div (# video-div), вызывающий методы show / hide, и iframe (# video-iframe), который имеет URL-адрес видео как src = "" и имеет суффикс enablejsapi = 1? , что позволяет программно управлять плеером (напр.

Подробнее о html см. Ответ RobW.

Answer 3

Вот простой фрагмент jQuery для приостановки всех видео на странице на основе ответов RobW и DrewT:

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Answer 4

Эй, простой способ - просто установить src для видео на ничего, чтобы видео исчезло, пока оно скрыто, а затем установить src обратно на видео, которое вы хотите, когда вы нажимаете на ссылку, которая открывает видео. Для этого просто установите id в iframe youtube и вызовите функцию src, используя этот идентификатор следующим образом:

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

Answer 5

Так как вам нужно установить ?enablejsapi=true в src iframe, прежде чем вы сможете использовать команды playVideo / pauseVideo, упомянутые в другие ответы , может быть полезно добавить это программно черезJavascript (особенно если, например, вы хотите, чтобы это поведение применялось к видео, встроенным другими пользователями, которые только что вырезали и вставили код для вставки YouTube).В этом случае может пригодиться что-то вроде этого:

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

... если вы вызываете это на document.ready, то для всех iframes в div с классом "video" будет добавлено enablejsapi=trueк их источнику, который позволяет командам playVideo / pauseVideo работать с ними.

(примечание. В этом примере используется jQuery для той строки, которая устанавливает var iframes, но общий подход должен работать так же хорошо с чистымJavascript, если вы не используете jQuery).

Answer 6

Вы можете остановить видео, вызвав метод stopVideo() на экземпляре плеера YouTube, прежде чем скрыть div, например,

player.stopVideo()

Подробнее см. Здесь: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

Answer 7

Я хотел бы поделиться решением, которое я придумал, используя jQuery, который работает, если у вас есть несколько видео YouTube, встроенных в одну страницу. В моем случае я определил модальное всплывающее окно для каждого видео следующим образом:

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

В этом случае videoModalXX представляет уникальный идентификатор для видео. Затем следующая функция останавливает видео:

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

Мне нравится этот подход, потому что он останавливает видео, где вы остановились на случай, если вы захотите вернуться и продолжить просмотр позже. Это хорошо работает для меня, потому что он ищет iframe внутри видео-мода с определенным идентификатором. Специальный идентификатор элемента YouTube не требуется. Надеюсь, кому-то это тоже пригодится.

Answer 8

Способ RobW отлично сработал для меня. Для людей, использующих jQuery, вот упрощенная версия, которую я в итоге использовал:

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

В этом примере «video_player» - это родительский div, содержащий iframe.

Answer 9

просто удалите источник iframe

$('button.close').click(function(){
    $('iframe').attr('src','');;
});

Answer 10

Этот подход требует jQuery. Сначала выберите ваш iframe:

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

Теперь вы выбираете кнопку воспроизведения / паузы этого фрейма и нажимаете на нее

$('button.ytp-play-button.ytp-button', yourIframe).click();

Надеюсь, это вам поможет.