Jak osadzić autoodtwarzające wideo z YouTube w ramce iframe?

Próbuję osadzić nową wersję filmu iframe w YouTube i włączyć automatyczne odtwarzanie.

O ile mi wiadomo, nie można tego zrobić, zmieniając flagi adresu URL. Czy można to zrobić za pomocą JavaScript i interfejsu API?

Działa to w Chrome, ale nie Firefox 3.6 (ostrzeżenie: wideo RickRoll):

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

JavaScript API dla iframe osadza istnieje, ale nadal jest oznakowana jako funkcja eksperymentalna.

AKTUALIZACJA: Interfejs API iframe jest teraz w pełni obsługiwany, a „Tworzenie obiektów YT.Player - Przykład 2” pokazuje, jak ustawić „autoodtwarzanie” w JavaScript.

Wbudowany kod youtube jest domyślnie wyłączony. Po prostu dodaj autoplay=1na końcu atrybutu „src”. Na przykład:

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

Od kwietnia 2018 r. Google wprowadziło zmiany w Polityce automatycznej . Musisz więc zrobić coś takiego:

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

Sierpień 2018 Nie znalazłem działającego przykładu implementacji iframe. Inne pytania dotyczyły tylko Chrome, co nieco go rozdało.

mute=1Aby automatycznie odtwarzać w Chrome, musisz wyciszyć dźwięk . Wydaje się, że FF i IE działają dobrze, używając autoplay=1jako parametru.

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

Iframe 2014 osadza sposób osadzania wideo na YouTube z autoodtwarzaniem i bez sugerowanych filmów na końcu klipu

rel=0&autoplay 

Przykład poniżej:.

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

na końcu elementu iframe src dodaj, &enablejsapi=1aby zezwolić na użycie interfejsu API js w filmie

a następnie za pomocą jquery:

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

to powinno odtwarzać wideo automatycznie na document.ready

zwróć uwagę, że możesz również użyć tego wewnątrz funkcji kliknięcia, aby kliknąć inny element, aby rozpocząć wideo

Co ważniejsze, nie można automatycznie uruchamiać filmów na urządzeniu mobilnym, więc użytkownicy zawsze będą musieli kliknąć sam odtwarzacz wideo, aby rozpocząć wideo

Edycja: tak naprawdę nie jestem w 100% pewien co do dokumentu. Już iframe będzie gotowy, ponieważ YouTube może nadal ładować wideo. Właściwie używam tej funkcji wewnątrz funkcji kliknięcia:

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

The flagi , lub parametry, które można używać z iframe i przedmiot umieszczanych tu udokumentowane; szczegółowe informacje o tym, który parametr działa z tym odtwarzaczem, są również wyraźnie wymienione:

Wbudowane odtwarzacze YouTube i parametry odtwarzacza

Zauważysz, że autoplayjest obsługiwany przez wszystkie odtwarzacze (AS3, AS2 i HTML5).

Wskazówka dotycząca wielu zapytań dla tych, którzy nie wiedzą (przeszłości i przyszłości)

Jeśli tworzysz pojedyncze zapytanie z adresem URL, po prostu ?autoplay=1działa, jak pokazano w odpowiedzi mjhm

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

Jeśli robisz wiele zapytań, pamiętaj, że pierwsze zaczyna się od ? chwili, a reszta zaczyna się od&

Powiedz, że chcesz wyłączyć powiązane filmy, ale włączyć autoodtwarzanie ...

To działa

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

i to działa

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

Ale to nie zadziała ...

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

przykładowe porównania

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

więcej informacji

Przeczytaj odpowiedź NextLocal poniżej, aby uzyskać więcej informacji na temat używania wielu ciągów zapytań

Aby uzyskać zaakceptowaną odpowiedź od mjhm działającą na Chrome 66 w maju 2018 r., Dodałem allow=autoplaydo elementu iframe i enable_js=1ciągu zapytania:

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

Obecnie dołączam nowy atrybut „allow” w tagu iframe, na przykład:

allow = "akcelerometr; autoodtwarzanie; media szyfrowane; żyroskop; obraz w obrazie"

Ostateczny kod to:

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

1 - dodaj &enablejsapi=1doIFRAME SRC

2 - funkcja jQuery:

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

Działa w porządku

Aby użyć interfejsu API javascript,

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

Aby zagrać w youtube z identyfikatorem:

swfobject.embedSWF

referencyjny: https://developers.google.com/youtube/js_api_reference magazyn

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

Grudnia 2018 r.

Szukasz wideo z YouTube AUTOPLAY, LOOP, MUTE do zareagowania.

Inne odpowiedzi nie zadziałały.

Znalazłem rozwiązanie z biblioteką: reaguj na 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}
            />
        )
    }

}