Как приостановить проигрыватель YouTube, скрывая iframe?

У меня есть скрытый 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 -->

ОТВЕТЫ

Ответ 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>

Ответ 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.

Ответ 3

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

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

Ответ 4

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

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

Ответ 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 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, тогда все iframe в div с классом "video" будут иметь enablejsapi=true, добавленный к их источнику, что позволяет командам playVideo/pauseVideo работать над ними.

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

Ответ 7

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

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

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

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

В этом примере "video_player" является родительским div, содержащим iframe.

Ответ 8

Я хотел поделиться решением, с которым я столкнулся, используя 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 не требуется. Надеюсь, кто-то найдет это полезным.

Ответ 9

просто удалите src iframe

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

Ответ 10

Ответ Rob W помог мне разобраться, как приостановить видео по iframe, когда слайдер скрыт. Тем не менее, мне нужны были некоторые изменения, прежде чем я смог заставить его работать. Вот фрагмент моего html:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Обратите внимание, что это работает на localhosts, а также как Rob W упоминает, что " enablejsapi = 1" был добавлен в конец URL-адреса видео.

Ниже приведен мой JS файл:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

Кроме того, в качестве более простого примера, проверьте это на JSFiddle

Ответ 11

Ответы RobW здесь и в другом месте были очень полезными, но я нашел, что мои потребности намного проще. Я ответил на этот в другом месте, но, возможно, он будет полезен и здесь.

У меня есть метод, в котором я формирую HTML-строку для загрузки в UIWebView:

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

Вы можете игнорировать элементы стиля в подготовленной строке HTTML. Важными аспектами являются:

  • Использование API для создания объекта "YT.player". В какой-то момент у меня было только видео в теге iFrame и это помешало мне ссылаться на объект "player" позже с помощью JS.
  • Я видел несколько примеров в Интернете, где первый тег script (тот, у которого есть тег iframe_api src) опущен, но мне определенно нужно, чтобы это работало.
  • Создание переменной "player" в начале API script. Я также видел несколько примеров, которые пропустили эту строку.
  • Добавление тега id в iFrame для ссылки в API script. Я почти забыл эту часть.
  • Добавление "enablejsapi = 1" в конец тега iFrame src. Это повредило меня некоторое время, поскольку я первоначально использовал его как атрибут тега iFrame, который не работает/не работает для меня.

Когда мне нужно приостановить видео, я просто запустил это:

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

Надеюсь, что это поможет!

Ответ 12

Для этого подхода требуется jQuery. Во-первых, выберите ваш iframe:

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

Теперь вы выбираете кнопку play/pause этого iframe и нажимаете на нее

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

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

Ответ 13

Это отлично работает с YT-проигрывателем

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo();

Ответ 14

Более сжатый, элегантный и безопасный ответ: добавьте "? enablejsapi = 1" в конец URL-адреса видео, затем создайте и подстройте обычный объект, представляющий команду pause:

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Используйте метод Window.postMessage для отправки результирующей строки JSON во встроенный видео-документ:

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

Убедитесь, что вы указываете URL-адрес видео для аргумента Window.postMessage методов targetOrigin, чтобы гарантировать, что ваши сообщения не будут отправлены любому непреднамеренному получателю.