YouTube Iframe встроить автоматическое воспроизведение

Я пытаюсь встроить новую версию iframe видео YouTube и получить его для автоматического воспроизведения.

насколько я могу судить, нет способа сделать это, изменив флаги на URL-адрес. Есть ли способ сделать это с помощью javascript и API?

12 ответов


это работает в Chrome, но не Firefox 3.6 (предупреждение: RickRoll video):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

на JavaScript API для iframe встраивается существует, но по-прежнему публикуется как экспериментальная функция.

UPDATE: API iframe теперь полностью поддерживается и " создание YT.Объекты-проигрыватель - Пример 2" показывает, как установить "автозапуск" в JavaScript.


встроенный код youtube имеет автозапуск по умолчанию. Просто добавьте autoplay=1в конце атрибута" src". Например:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

2014 iframe embed о том, как встроить видео youtube с автозапуском и без предлагаемых видео в конце клипа

rel=0&amp;autoplay 

Пример Ниже: .

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

В конце src iframe добавьте &enablejsapi=1 чтобы JS API можно было использовать на видео

и затем с jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

это должно воспроизводить видео автоматически на документе.готов

обратите внимание, что вы также можете использовать это внутри функции щелчка, чтобы нажать на другой элемент для запуска видео

что еще более важно, вы не можете автоматически запускать видео на мобильном устройстве, поэтому пользователям всегда придется нажимать на сам видеоплеер, чтобы начать видео

изменить: Я на самом деле не на 100% уверен в документе.готовый iframe будет готов, потому что YouTube все еще может загружать видео. На самом деле я использую эту функцию внутри функции click:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

на флаги или параметры, которые вы можете использовать с iframe и OBJECT embeds, описаны здесь; подробности о том, какой параметр работает с каким игроком, также четко указаны:

YouTube встроенные игроки и параметры игрока

Вы заметите, что autoplay поддерживается всеми игроками (AS3, AS2 и HTML5).


несколько запросов совет для тех, кто не знает (мимо меня и будущего меня)

если вы делаете один запрос с url просто ?autoplay=1 работает как показано в ответе mjhm

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

если вы делаете несколько запросов, помните, что первый начинается с ? в то время как остальные начинаются с &

Допустим, вы хотите выключить видео, но включить автозапуск...

это работает

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

и этого работает

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

но это не сработает..

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

пример сравнения

https://jsfiddle.net/Hastig/p4dpo5y4/

подробнее

прочитайте ответ NextLocal ниже для получения дополнительной информации об использовании нескольких строк запроса


С апреля 2018 года Google внес некоторые изменения в Автозапуск Политики. Поэтому вам придется сделать что-то вроде этого:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

для использования javascript api,

<script type="text/javascript" src="swfobject.js"></script>
  <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/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

для воспроизведения youtube с идентификатором:

swfobject.embedSWF

ссылка: https://developers.google.com/youtube/js_api_referencemagazine


1 - добавить &enablejsapi=1 to IFRAME SRC

2-jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

работает отлично


чтобы получить принятый ответ от mjhm, работающего на Chrome 66 в мае 2018 года, я добавил allow=autoplay в iframe и enable_js=1 к строке запроса:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

август 2018 я не нашел рабочего примера реализации iframe. Другие вопросы были связаны только с Chrome, что немного его выдавало.

вам придется отключить звук mute=1 для автозапуска в Chrome. FF и IE, похоже, работают просто отлично, используя autoplay=1 в качестве параметра.

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>