Как встроить автоматически воспроизводимое видео YouTube в iframe?


225

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

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


Есть ли способ отключить звук, когда видео начинает воспроизводиться, с помощью кода, я не хочу удивлять своих пользователей звуком
Даниэль Метлицки

Ответы:


423

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

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

JavaScript API для IFrame встраивает существует, но до сих пор размещен в качестве экспериментальной функции.

ОБНОВЛЕНИЕ: теперь полностью поддерживается интерфейс iframe, а в разделе «Создание объектов YT.Player - пример 2» показано, как установить «автозапуск» в JavaScript.


2
Подсказка: на мобильных устройствах возможно, что и параметр src, и вызов API не будут работать из-за ограничений: developers.google.com/youtube/…
Линус Колдуэлл,

Я обнаружил, что на мобильном устройстве (Webview на Android 5.0) эта функция onYouTubeIframeAPIReady()не срабатывает. У кого-нибудь есть решение?
Кто-то где-то

2
Есть ли способ отключить звук, когда видео начинает воспроизводиться, с помощью кода, я не хочу удивлять своих пользователей звуком
Даниэль Метлицки


6
Вам также может понадобиться: allow = "autoplay" для вашего iFrame
Jeffz

40

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

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

2
добавить ?autoplay=1в Src
Squirrl

1
да собственно автовоспроизведение = 1 пока? указать, что src может иметь такие параметры, как цвет, элементы управления и каждый из них разделен знаком &. подробное описание можно посмотреть здесь developers.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman


14

Август 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>

12

Встраивание iframe 2014 года о том, как вставить видео на 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>

9

в конце iframe src добавьте, &enablejsapi=1чтобы разрешить использование js API в видео

а затем с помощью jquery:

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

это должно автоматически воспроизвести видео на document.ready

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

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

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

$('.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
});

1
Использование этого ответа и обертывание селектора jQuery в setTimeoutработало для меня.
tyler.frankenstein

1
То же самое и здесь, просто запускайте событие несколько раз каждую секунду, и оно будет работать.
Матиас Кляйн

6

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

Встроенные плееры и параметры YouTube

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


6

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

Если вы делаете один запрос, 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 ниже для получения дополнительной информации об использовании нескольких строк запроса


1
Ваша причина не сработала, потому что вы уже ?rel=0там были. Если бы вы удалили, это бы сработало. Узнайте больше о синтаксисе строки запроса здесь, если хотите. ?rel=0?autoplay=1должны быть либо ?autoplay=1или?rel=0&autoplay=1
jaggedsoft

@NextLocal Спасибо, я вернусь к этому и отредактирую / удалим свой ответ в следующий раз, когда я работаю над чем-то, что вставляет видео на YouTube.
Хастиг Зусамменстеллен

пример, который вы http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1
приводите,

@NextLocal Ха, я понял. Не уверен, как я этого не понял: D Еще раз спасибо.
Хастиг Зусамменстеллен

Есть ли способ отключить звук, когда видео начинает воспроизводиться, с помощью кода, я не хочу удивлять своих пользователей звуком
Даниэль Метлицки

3

Чтобы принятый ответ от 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>

2

В настоящее время я добавляю новый атрибут «allow» в тег iframe, например:

allow = "акселерометр; автозапуск; зашифрованные носители; гироскоп; картинка в картинке"

Окончательный код:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

работает трюк! Я не мог понять, почему при загрузке страницы иногда показывалось видео, а не в другое время!
shaneonabike

1

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

2 - функция jQuery:

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

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


В моем случае это работает с консоли, или когда я уже взаимодействовал с видео вручную. Не работает на нагрузке, даже по тайм-
ауту

0

Чтобы использовать API Java,

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


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

0

Декабрь 2018 г.

Ищете видео в режиме AUTOPLAY, LOOP, MUTE для реакции на YouTube.

Другие ответы не сработали.

Я нашел решение с помощью библиотеки: Reaction-YouTube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.