Як призупинити програвач YouTube, приховуючи iframe?


86

У мене є прихований 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 -->

Я не впевнений, але, можливо, вам доведеться знайти спосіб зупинити відео або видалити відео з div, а не просто приховати ..
aniri

ви повинні прийняти відповідь.
snymkpr

Відповіді:


188

Найпростіший спосіб реалізувати таку поведінку - викликати методи pauseVideoі playVideo, коли це необхідно. Натхненний результатом моєї попередньої відповіді , я написав функцію без плагіна для досягнення бажаної поведінки.

Єдині коригування:

  • Я додав функцію, toggleVideo
  • Я додав ?enablejsapi=1URL-адресу 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>

1
Так, безумовно, потрібен зелений прапорець, якщо це спрацювало. Я теж приймаю це рішення - чудова річ, у мене є ці відеокадри в акордеоні jQueryUI, тому мені потрібно приєднати його до кожної події тригера.
jeffkee

Просто хотів зазначити, що, на жаль, API YouTube змушує вас використовувати подвійні лапки для повідомлення, надісланого через postMessage. Наприклад, ви не можете переключитися на зовнішні подвійні лапки та внутрішні одинарні лапки.
Йорданія

1
@Jordan, це цілком має сенс, оскільки повідомлення, як очікується, буде JSON. JSON, за визначенням, використовує подвійні лапки для цитування ключів і значень.
Роб W

2
Якщо комусь цікаво, я оновив код, щоб припинити відтворення відео, коли ви натискаєте кнопку «Закрити» на модалі bootstrap 3. $ ("# MyModal-close") .click (function () {var div = document.getElementById ("MyModal-videoWrapper"); var iframe = div.getElementsByTagName ("iframe") [0] .contentWindow; iframe.postMessage ('{"event": "command", "func": "' + 'pauseVideo' + '", "args": ""}', '*');});
Райан Уолтон,

10
Зверніть увагу, що вам потрібно додати ?enablejsapi=1URL-адресу вбудовування iframe <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe>
приблизно

23

Ось 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.


5
Що покращена читабельність змінювала? умовно до if / else, але дякую за те, що мене почали з цього. Я просто відчув, що мені є що додати, це все.
DrewT

15

Ось простий фрагмент jQuery, щоб призупинити всі відео на сторінці на основі відповідей RobW та DrewT:

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

якщо ви не хочете використовувати jQuery, код усередині функції 'кожен' однаковий після того, як ви зняли посилання на об'єкт jQuery. тобто node.contentWindow. ...
mattdlockyer

Як повернути це назад, щоб відтворити його знову, коли відео знову відображається?
Карл Папворт,

Просто замініть "pauseVideo" на "playVideo". Приклад: jsfiddle.net/ora2kqzq/1
квартар

Це вже не працює ... навіть коли я намагаюся, {"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"}після {"event":"listening","id":1,"channel":"widget"}чого це те, що YT.Player iframe api публікує на вбудованому YouTube.
NoBugs

9

Гей, простий спосіб - просто встановити значення src для відео на нуль, так що відео зникне, поки воно буде прихованим, а потім встановіть src назад до відео, яке ви хочете натиснути на посилання, що відкриває відео .. зробити що просто встановити ідентифікатор для 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>

4
Попередження: Зміни до iframe«s srcз Javascript ненавмисно натиснути на window.history, викликаючи проблеми кнопки назад.
Йорданія Арсено

Дякую Йордано! Я тільки почав використовувати цю відповідь сам і не знав про цю поведінку. Краще знати зараз, ніж пізніше :)
MMachinegun

Справедливе попередження для тих, хто намагається використовувати цей метод: це може спричинити надзвичайно помітне відставання, якщо ви використовуєте це для перемикання між div, які містять вбудовані вставки для YouTube. Будь обережний.
Мухаммад Абдул-Рахім

6

Оскільки вам потрібно встановити ?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тоді всі вставки в div з класом "video" будуть enablejsapi=trueдодані до свого джерела, що дозволяє командам playVideo / pauseVideo працювати над ними.

(примітка. у цьому прикладі використовується jQuery для одного рядка, який встановлюється var iframes, але загальний підхід повинен працювати так само добре з чистим Javascript, якщо ви не використовуєте jQuery).


5

Ви можете зупинити відео, зателефонувавши stopVideo()методу на екземплярі програвача YouTube, перш ніж приховувати div, наприклад

player.stopVideo()

Детальніше див. Тут: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls


що таке об’єкт програвача і як ви до нього отримуєте доступ? Я розумію, програвач невизначений, а відео все ще відтворюється
Клаудіу Креанга,

Він доступний, коли ви створили його за допомогою JS API.
Девід

4

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

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

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

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

У цьому прикладі "video_player" - це батьківський div, що містить iframe.


4

Я хотів поділитися рішенням, яке я придумав за допомогою 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":""}', '*');
}

Мені подобається такий підхід, оскільки він утримує відео на паузі там, де ви зупинились, якщо ви захочете повернутися назад і продовжити перегляд пізніше. Для мене це добре працює, оскільки він шукає внутрішній кадр відеомодаля з певним ідентифікатором. Спеціальний ідентифікатор елемента YouTube не потрібен. Сподіваємось, комусь це теж стане в нагоді.


Це чудово працювало без тонни коду. У мене є кілька відеороликів YT на сторінці, і я просто показую великий палець YT і потребував рішення зупинки / паузи. І змінивши pauseVideo на playVideo, я зміг запустити відео, коли воно розширилося до повної ширини стовпця
WebDude0482

2

просто видаліть src з iframe

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

Але він може захотіти продовжувати грати, коли користувачі натискають кнопку відкрити.
Coda Chang

брате, onclick ще раз додай src через jquery, це буде працювати
rakesh kejriwal

1

Відповідь Роб 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>

Зауважте, що це працює на локальних хостах, а також як згадував Роб 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


1

Цей підхід вимагає jQuery. Спочатку виберіть свій iframe:

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

Тепер ви вибираєте кнопку відтворення / паузи цього iframe і натискаєте його

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

Сподіваюся, це вам допоможе.


0

Відповіді 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.
  • Я бачив кілька прикладів в Інтернеті, де перший тег сценарію (той, що має тег iframe_api src) опущений, але мені це точно знадобилося, щоб це працювало.
  • Створення змінної "player" на початку сценарію API. Я також бачив кілька прикладів, які пропускали цей рядок.
  • Додавання тегу ідентифікатора до iFrame для посилання у сценарії API. Я майже забув цю частину.
  • Додавання "enablejsapi = 1" до кінця тегу iFrame src. Це мене на деякий час повісило, оскільки спочатку я мав це як атрибут тегу iFrame, який не працює / не працює для мене.

Коли мені потрібно призупинити відео, я просто запускаю це:

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

Сподіваюся, це допоможе!


Якщо вам цікаво, чому немає голосів, це тому, що це не javascript, тому не корисно для випадку використання OP, який є iframe, що посилається на URL-адресу вбудованого YouTube, а не на додаток iOS.
Vroo

@Vroo Так, розумію. Просто хотів залишити цю відповідь тут на випадок, якщо сюди прийде інший користувач iOS і знайде це питання, як і я.
Брайан

0

Мені це добре працює з програвачем 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 ();


0

Більш лаконічна, елегантна та безпечна відповідь: додайте “? Enablejsapi = 1” у кінець URL-адреси відео, потім побудуйте та розшифруйте звичайний об’єкт, що представляє команду паузи:

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щоб переконатися, що ваші повідомлення не надсилатимуться жодному ненавмисному одержувачу.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.