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

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

84 голосов
/ 29 декабря 2011

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

Ответы [ 14 ]

1 голос
/ 15 сентября 2014

Ответ Роба В. помог мне понять, как поставить видео на паузу, если слайдер скрыт. Тем не менее, мне нужно было внести некоторые изменения, прежде чем я смог заставить его работать. Вот фрагмент моего 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 , а также, как Роб 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

0 голосов
/ 21 октября 2017

Более краткий, элегантный и безопасный ответ: добавьте «? 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-адрес видео для аргумента targetOrigin метода Window.postMessage, чтобы гарантировать, что ваши сообщения не будут отправлены никаким непреднамеренным получателям.

0 голосов
/ 13 сентября 2017

Это нормально работает с YT player 

 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 ();

0 голосов
/ 20 августа 2014

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

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

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

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

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

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

Страница:
...